StyleChanges

ReactLearning/kanban-board/src/App.css

@@ -1,35 +1,38 @@
-.App {
-  text-align: center;
-}
-
-
-
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+html {
+  background-color: #383c4a;
 }
 
-.App-link {
-  color: #61dafb;
+.header {
+  color: #ddd;
+  background-color: #2a2e3a;
+  vertical-align: middle;
 }
+.header > button {
+  height: 100%;
+  display: block;
+  float: right;
+  margin-top: auto;
+  margin-bottom: auto;
+  width: 150px;
+  font-size: 16pt;
+  color: #ddd;
+  border-style: line;
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+  background-color: #404552;
 }
-
+ 
+/* For some reason, the CSS i need to use to get this to work isn't coming to me >:( */
 .KBColumn {
+  text-align: center;
   display: block;
   float: left;
-  width: 200px;
+  width:initial;
+  flex-grow:inherit;
+  border-color: #ddd;
+  border-width: 2px;
+  border-style: solid;
+  color: "orange";
+}
+.panel{
+  width: 100%;
 }

ReactLearning/kanban-board/src/App.tsx

@@ -56,7 +56,7 @@ class App extends React.Component<{}, State> {
     this.state.columns.push({
       id: columnId,
       name: "tempName" + columnId,
-      color: "red",
+      color: "#404552",
       tasks: [],
     });
   }
@@ -78,6 +78,7 @@ class App extends React.Component<{}, State> {
     return (
       <div className="App">
         <Header addColumn={this.addColumn} addTask={this.addTask} />
+        <div className='panel'>
         {this.state.columns.map((column, index) => (
           <KBColumn
             color={column.color}
@@ -88,6 +89,7 @@ class App extends React.Component<{}, State> {
             tasks={column.tasks}
           />
         ))}
+          </div>
       </div>
     );
   }

ReactLearning/kanban-board/src/components/Header.tsx

@@ -6,7 +6,7 @@ type HeaderProps = {
 };
 const Header = (props: HeaderProps) => {
   return (
-    <div className="header" style={{ backgroundColor: "grey", height: 60 }}>
+    <div className="header" style={{  height: 60 }}>
       <h1
         style={{
           float: "left",

ReactLearning/kanban-board/src/components/KBColumn.tsx

@@ -8,7 +8,7 @@ type KBColumnProps = {
   onDelete?: (id: number) => void;
 };
 const defaultProps: KBColumnProps = {
-  color: "#00cc00",
+  color: "#404552",
   title: "waah",
   tasks: [],
   id: -1,