Styling

ides15 · Dec 13, 2018 · f52d750 · f52d750
1 parent 410a32b
commit f52d750
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 21 deletions.
diff --git a/app/src/App.js b/app/src/App.js
@@ -24,6 +24,7 @@ const Container = styled(Card)`
   height: 100%;
   padding: 0;
   overflow-y: auto;
+  border-radius: 0px;
 `;
 
 class App extends Component {

diff --git a/app/src/components/Image.js b/app/src/components/Image.js
@@ -27,6 +27,8 @@ const ImageTag = styled.h3`
 
 const P = styled.p`
   font-weight: bold;
+  overflow: hidden;
+  text-overflow: ellipsis;
 `;
 
 class Image extends Component {

diff --git a/app/src/components/pages/Images.js b/app/src/components/pages/Images.js
@@ -1,7 +1,6 @@
 import React, { Component } from "react";
 
 import styled from "styled-components";
-// import _ from 'lodash'
 import { Flex, Box } from "reflexbox";
 import {
   Collapse,

diff --git a/app/src/components/pages/Info.js b/app/src/components/pages/Info.js
@@ -1,17 +1,18 @@
 import React, { Component } from "react";
 
-import { Collapse, Card } from "@blueprintjs/core";
+import { Collapse } from "@blueprintjs/core";
 import { Route } from "react-router-dom";
-// import { Flex } from "reflexbox";
+import { Box } from "reflexbox";
+import styled from "styled-components";
 
-class Info extends Component {
-  constructor() {
-    super();
+const Title = styled.h2`
+  margin: 0;
+`;
 
-    this.state = {
-      info: null
-    };
-  }
+class Info extends Component {
+  state = {
+    info: null
+  };
 
   async componentDidMount() {
     const info = await fetch("/api/info");
@@ -26,8 +27,8 @@ class Info extends Component {
         path="/info"
         render={({ match }) => (
           <Collapse isOpen={match}>
-            <Card>
-              <h2>Info</h2>
+            <Box p={2}>
+              <Title>Info</Title>
               {/* {info && (
                 <Flex column>
                   <Flex>
@@ -40,7 +41,7 @@ class Info extends Component {
                   </Flex>
                 </Flex>
               )} */}
-            </Card>
+            </Box>
           </Collapse>
         )}
       />

diff --git a/app/src/components/pages/Networks.js b/app/src/components/pages/Networks.js
@@ -1,17 +1,23 @@
 import React from "react";
 
-import { Collapse, Card } from "@blueprintjs/core";
+import { Collapse } from "@blueprintjs/core";
 import { Route } from "react-router-dom";
+import styled from "styled-components";
+import { Box } from "reflexbox";
+
+const Title = styled.h2`
+  margin: 0;
+`;
 
 const Networks = () => {
   return (
     <Route
       path="/networks"
       render={({ match }) => (
         <Collapse isOpen={match}>
-          <Card>
-            <h1>Networks</h1>
-          </Card>
+          <Box p={2}>
+            <Title>Networks</Title>
+          </Box>
         </Collapse>
       )}
     />

diff --git a/app/src/components/pages/Volumes.js b/app/src/components/pages/Volumes.js
@@ -1,17 +1,23 @@
 import React from "react";
 
-import { Collapse, Card } from "@blueprintjs/core";
+import { Collapse } from "@blueprintjs/core";
 import { Route } from "react-router-dom";
+import styled from "styled-components";
+import { Box } from "reflexbox";
+
+const Title = styled.h2`
+  margin: 0;
+`;
 
 const Volumes = () => {
   return (
     <Route
       path="/volumes"
       render={({ match }) => (
         <Collapse isOpen={match}>
-          <Card>
-            <h1>Volumes</h1>
-          </Card>
+          <Box p={2}>
+            <Title>Volumes</Title>
+          </Box>
         </Collapse>
       )}
     />