Merge pull request #822 from garden-io/overview-overall-restyle

style(dashboard): overall improvements
garden-io · Jun 12, 2019 · 80cb2aa · 80cb2aa
2 parents 23676d4 + 6ff7acb
commit 80cb2aa
Show file tree

Hide file tree

Showing 7 changed files with 159 additions and 163 deletions.
diff --git a/dashboard/src/components/entity-card.tsx b/dashboard/src/components/entity-card.tsx
@@ -10,7 +10,7 @@ import React, { ReactNode } from "react"
 import styled from "@emotion/styled"
 import { Entity } from "../containers/overview"
 import { colors } from "../styles/variables"
-import { Facebook } from "react-content-loader"
+import { Facebook as ContentLoader } from "react-content-loader"
 
 interface EntityCardProps {
   type: EntityType
@@ -19,10 +19,11 @@ const EntityCard = styled.div<EntityCardProps>`
   max-height: 13rem;
   background-color: ${props => (props && props.type && colors.cardTypes[props.type] || "white")};
   margin-right: 1rem;
-  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.14);
+  box-shadow: 2px 2px 9px rgba(0,0,0,0.14);
   border-radius: 4px;
   width: 100%;
   margin-top: 1rem;
+  padding: .75rem;
 
   &:first-of-type {
     margin-top: 0;
@@ -32,43 +33,41 @@ const EntityCard = styled.div<EntityCardProps>`
     margin-right: 0;
   }
 `
+
 const Header = styled.div`
   width: 100%;
-  padding: .6rem .75rem;
-  height: 3rem;
+  display:flex;
+  justify-content: space-between;
 `
 
 const Content = styled.div`
   width: 100%;
-  padding: 0rem .75rem .75rem .75rem;
   position: relative;
   max-height: 10rem;
+  padding-top: .75rem;
   &:empty
-{
-    display:none;
-}
+  {
+      display:none;
+  }
 `
 
-type StateProps = {
+type StateContainerProps = {
   state: string,
 }
-const State = styled.div<StateProps>`
+const StateContainer = styled.div<StateContainerProps>`
   padding: 0 .5rem;
   margin-left: auto;
-  background-color: ${props => (props && props.state && colors.state[props.state] || colors.gardenGrayLight)};
-  display: ${props => (props && props.state && colors.state[props.state] && "flex" || "none")};
+  background-color: ${props => (props && props.state ? colors.state[props.state] : colors.gardenGrayLight)};
+  display: ${props => (props && props.state && colors.state[props.state] ? "flex" : "none")};
   align-items: center;
-  margin-top: -0.5rem;
-
-border-radius: 4px;
-
-font-weight: 500;
-font-size: 11px;
-line-height: 16px;
-text-align: center;
-letter-spacing: 0.02em;
-
-color: #FFFFFF;
+  border-radius: 0.25rem;
+  font-weight: 500;
+  font-size: 0.6875rem;
+  line-height: 1rem;
+  text-align: center;
+  letter-spacing: 0.02em;
+  color: #FFFFFF;
+  height: 1rem;
 `
 
 const Tag = styled.div`
@@ -81,17 +80,16 @@ const Tag = styled.div`
   letter-spacing: 0.01em;
   color: #90A0B7;
 `
+
 const Name = styled.div`
-  height: 1rem;
   font-size: 0.9375rem;
+  font-weight: 500;
   color: rgba(0, 0, 0, .87);
+  padding-top: 0.125rem;
 `
 
-const Row = styled.div`
-  display: flex;
-  align-items: center;
-`
 type EntityType = "service" | "test" | "task"
+
 interface Props {
   type: EntityType
   children: ReactNode
@@ -107,19 +105,19 @@ export default ({
   return (
     <EntityCard type={type}>
       <Header>
-        <Tag>{type.toUpperCase()}</Tag>
-        <Row>
+        <div>
+          <Tag>{type.toUpperCase()}</Tag>
           <Name>{name}</Name>
-          {state && (
-            <State state={state}>
-              {state}
-            </State>
-          )}
-        </Row>
+        </div>
+        {state && (
+          <StateContainer state={state}>
+            {state}
+          </StateContainer>
+        )}
       </Header>
       <Content>
         {isLoading && (
-          <Facebook height={100} />
+          <ContentLoader height={100} />
         )}
         {!isLoading && children}
       </Content>

diff --git a/dashboard/src/components/entity-result.tsx b/dashboard/src/components/entity-result.tsx
@@ -156,7 +156,7 @@ export default ({
         `,
         )}
       >
-        <div className="row">
+        <div className="row middle-xs">
           <div>
             <IconContainer className={cls(`garden-icon`, `garden-icon--${type}`)} />
           </div>

diff --git a/dashboard/src/components/ingresses.tsx b/dashboard/src/components/ingresses.tsx
@@ -34,7 +34,7 @@ const Ingresses = styled.div`
   }
 `
 const LinkContainer = styled.div`
-  padding-bottom: 1rem;
+  padding-top: .25rem;
   font-size: .75rem;
 
   &:last-of-type {
@@ -69,7 +69,7 @@ export default ({ ingresses }: IngressesProp) => {
 
   return (
     <Ingresses>
-      {(ingresses || []).map((ingress, index) => {
+      {(ingresses || []).map((ingress) => {
         const url = getIngressUrl(ingress)
         return (
           <LinkContainer key={ingress.path}>
@@ -83,9 +83,6 @@ export default ({ ingresses }: IngressesProp) => {
                 {truncateMiddle(url)}
               </ExternalLink>
             </div>
-            {ingresses && (index < ingresses.length - 1) &&
-              <br />
-            }
           </LinkContainer>
         )
       })}
-Original file line number
+Diff line change
@@ Expand Up / @@ -156,7 +156,7 @@ export default ({ @@
             `,
             )}
           >
-            <div className="row">
+            <div className="row middle-xs">
               <div>
                 <IconContainer className={cls(`garden-icon`, `garden-icon--${type}`)} />
               </div>
@@ Expand Down @@