From 33a4b35464335877fd1ac2631b030423e79761e6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Espino?= <jespinog@gmail.com>
Date: Sun, 25 Oct 2020 22:11:27 +0100
Subject: [PATCH] Moving more css aside components

---
 webapp/src/components/tableComponent.scss | 97 +++++++++++++++++++++++
 webapp/src/components/tableComponent.tsx  |  4 +-
 webapp/static/main.css                    | 90 ---------------------
 3 files changed, 100 insertions(+), 91 deletions(-)
 create mode 100644 webapp/src/components/tableComponent.scss

diff --git a/webapp/src/components/tableComponent.scss b/webapp/src/components/tableComponent.scss
new file mode 100644
index 000000000..17afcfa41
--- /dev/null
+++ b/webapp/src/components/tableComponent.scss
@@ -0,0 +1,97 @@
+.TableComponent {
+    .octo-table-cell {
+        flex: 0 0 auto;
+        display: flex;
+        flex-direction: row;
+
+        color: rgba(55, 53, 47);
+        border-right: solid 1px rgba(55, 53, 47, 0.09);
+        box-sizing: border-box;
+        padding: 5px 8px 6px 8px;
+
+        width: 150px;
+        min-height: 32px;
+
+        font-size: 14px;
+        line-height: 21px;
+
+        overflow: hidden;
+        position: relative;
+
+        .octo-icontitle {
+            .octo-icon {
+                min-width: 20px;
+            }
+        }
+
+        &.title-cell {
+            width: 280px;
+        }
+
+        &:focus-within {
+            background-color: rgba(46, 170, 220, 0.15);
+            border: 1px solid rgba(46, 170, 220, 0.6);
+        }
+
+        .octo-editable {
+            padding: 0 5px;
+            display: relative;
+            left: -5px;
+        }
+
+        .octo-editable.octo-editable.active {
+            overflow: hidden;
+        }
+
+        .octo-propertyvalue {
+            line-height: 17px;
+        }
+
+        .octo-button,
+        .octo-editable,
+        .octo-propertyvalue
+        {
+            text-align: left;
+            white-space: nowrap;
+        }
+    }
+
+    .octo-table-body {
+        display: flex;
+        flex-direction: column;
+        padding: 0 10px;
+    }
+
+    .octo-table-header,
+    .octo-table-row,
+    .octo-table-footer {
+        display: flex;
+        flex-direction: row;
+
+        border-bottom: solid 1px rgba(55, 53, 47, 0.09);
+    }
+
+    .octo-table-header {
+        .octo-table-cell {
+            color: rgba(55, 53, 47, 0.6);
+            .octo-label {
+                color: rgba(55, 53, 47, 0.6);
+            }
+        }
+    }
+
+    .octo-table-footer {
+        .octo-table-cell {
+            color: rgba(55, 53, 47, 0.6);
+            cursor: pointer;
+
+            width: 100%;
+            border-right: none;
+            padding-left: 15px;
+            &:hover {
+	            background-color: rgba(55, 53, 47, 0.08);
+            }
+        }
+    }
+
+}
diff --git a/webapp/src/components/tableComponent.tsx b/webapp/src/components/tableComponent.tsx
index 18d0dba8b..3e83c37a1 100644
--- a/webapp/src/components/tableComponent.tsx
+++ b/webapp/src/components/tableComponent.tsx
@@ -20,6 +20,8 @@ import ViewHeader from './viewHeader'
 import ViewTitle from './viewTitle'
 import TableHeaderMenu from './tableHeaderMenu'
 
+import './tableComponent.scss'
+
 type Props = {
     boardTree?: BoardTree
     showView: (id: string) => void
@@ -73,7 +75,7 @@ class TableComponent extends React.Component<Props, State> {
         this.cardIdToRowMap.clear()
 
         return (
-            <div className='octo-app'>
+            <div className='TableComponent octo-app'>
                 {this.state.shownCard &&
                 <RootPortal>
                     <CardDialog
diff --git a/webapp/static/main.css b/webapp/static/main.css
index 340d8c83a..b106dbb34 100644
--- a/webapp/static/main.css
+++ b/webapp/static/main.css
@@ -396,11 +396,6 @@ hr {
 	margin-right: 15px;
 }
 
-
-.octo-table-cell .octo-icontitle .octo-icon {
-	min-width: 20px;
-}
-
 /*-- Property list --*/
 
 .octo-propertyvalue {
@@ -432,20 +427,6 @@ hr {
 	color: rgba(55, 53, 47, 0.4);
 }
 
-.octo-table-cell:focus-within {
-	background-color: rgba(46, 170, 220, 0.15);
-	border: 1px solid rgba(46, 170, 220, 0.6);
-}
-
-.octo-table-cell .octo-editable {
-	padding: 0 5px;
-	display: relative;
-	left: -5px;
-}
-
-.octo-table-cell .octo-editable.octo-editable.active {
-	overflow: hidden;
-}
 
 .octo-propertyvalue.octo-editable.active,
 .octo-table-cell .octo-editable.active {
@@ -453,77 +434,6 @@ hr {
 	box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px;
 }
 
-/* Table */
-
-.octo-table-body {
-	display: flex;
-	flex-direction: column;
-	padding: 0 10px;
-}
-
-.octo-table-header,
-.octo-table-row,
-.octo-table-footer {
-	display: flex;
-	flex-direction: row;
-
-	border-bottom: solid 1px rgba(55, 53, 47, 0.09);
-}
-
-.octo-table-cell {
-	flex: 0 0 auto;
-	display: flex;
-	flex-direction: row;
-
-	color: rgba(55, 53, 47);
-	border-right: solid 1px rgba(55, 53, 47, 0.09);
-	box-sizing: border-box;
-	padding: 5px 8px 6px 8px;
-
-	width: 150px;
-	min-height: 32px;
-
-	font-size: 14px;
-	line-height: 21px;
-
-	overflow: hidden;
-	position: relative;
-}
-
-.octo-table-cell.title-cell {
-	width: 280px;
-}
-
-.octo-table-cell .octo-propertyvalue {
-	line-height: 17px;
-}
-
-.octo-table-header .octo-table-cell,
-.octo-table-header .octo-table-cell .octo-label {
-	color: rgba(55, 53, 47, 0.6);
-}
-
-.octo-table-footer .octo-table-cell {
-	color: rgba(55, 53, 47, 0.6);
-	cursor: pointer;
-
-	width: 100%;
-	border-right: none;
-	padding-left: 15px;
-}
-
-.octo-table-footer .octo-table-cell:hover {
-	background-color: rgba(55, 53, 47, 0.08);
-}
-
-.octo-table-cell .octo-button,
-.octo-table-cell .octo-editable,
-.octo-table-cell .octo-propertyvalue
-{
-	text-align: left;
-	white-space: nowrap;
-}
-
 .octo-button.octo-hovercontrol {
 	background: rgb(239, 239, 238);
 }