From 2842e19a3b21b93a5f805e0b4fa8ecfa6332e75c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Espino?= <jespinog@gmail.com>
Date: Mon, 2 Nov 2020 07:47:52 +0100
Subject: [PATCH] Removed all the octo-button usages and replaced them with
 Button

---
 webapp/src/components/cardDetail.scss | 17 ++++++++++-----
 webapp/src/components/cardDetail.tsx  | 25 +++++++++++-----------
 webapp/src/styles/main.scss           | 30 ---------------------------
 3 files changed, 25 insertions(+), 47 deletions(-)

diff --git a/webapp/src/components/cardDetail.scss b/webapp/src/components/cardDetail.scss
index d7adb243b..fccc7d3c2 100644
--- a/webapp/src/components/cardDetail.scss
+++ b/webapp/src/components/cardDetail.scss
@@ -18,24 +18,31 @@
         display: flex;
         flex-direction: column;
         width: 100%;
+        .MenuWrapper: {
+            position: relative;
+        }
     }
 
     .octo-propertyrow {
         display: flex;
         flex-direction: row;
         margin: 8px 0;
-        .MenuWrapper {
-            display: flex;
-            align-items: center;
+        .octo-propertyvalue {
+            .MenuWrapper {
+                display: flex;
+                align-items: center;
+            }
         }
     }
 
     .octo-propertyname {
-        text-align: left;
         width: 150px;
         margin-right: 5px;
-        color: #909090;
         color: rgba(var(--main-fg), 0.6);
+        .Button {
+            text-align: left;
+            justify-content: unset;
+        }
         &.add-property {
             color: rgba(var(--main-fg), 0.4);
         }
diff --git a/webapp/src/components/cardDetail.tsx b/webapp/src/components/cardDetail.tsx
index a55c0ba83..49336e2b2 100644
--- a/webapp/src/components/cardDetail.tsx
+++ b/webapp/src/components/cardDetail.tsx
@@ -161,7 +161,7 @@ class CardDetail extends React.Component<Props, State> {
                                     className='octo-propertyrow'
                                 >
                                     <MenuWrapper>
-                                        <div className='octo-button octo-propertyname'>{propertyTemplate.name}</div>
+                                        <div className='octo-propertyname'><Button>{propertyTemplate.name}</Button></div>
                                         <PropertyMenu
                                             property={propertyTemplate}
                                             boardTree={boardTree}
@@ -178,17 +178,18 @@ class CardDetail extends React.Component<Props, State> {
                             )
                         })}
 
-                        <div
-                            className='octo-button octo-propertyname add-property'
-                            onClick={async () => {
-                                // TODO: Show UI
-                                await mutator.insertPropertyTemplate(boardTree)
-                            }}
-                        >
-                            <FormattedMessage
-                                id='CardDetail.add-property'
-                                defaultMessage='+ Add a property'
-                            />
+                        <div className='octo-propertyname add-property'>
+                            <Button
+                                onClick={async () => {
+                                    // TODO: Show UI
+                                    await mutator.insertPropertyTemplate(boardTree)
+                                }}
+                            >
+                                <FormattedMessage
+                                    id='CardDetail.add-property'
+                                    defaultMessage='+ Add a property'
+                                />
+                            </Button>
                         </div>
                     </div>
 
diff --git a/webapp/src/styles/main.scss b/webapp/src/styles/main.scss
index f7341c215..1eb2ab2b2 100644
--- a/webapp/src/styles/main.scss
+++ b/webapp/src/styles/main.scss
@@ -119,25 +119,6 @@ hr {
 	flex: 1;
 }
 
-.octo-clickable,
-.octo-button {
-    display: flex;
-    justify-content: center;
-	text-align: center;
-	border-radius: 5px;
-	padding: 0 5px;
-	min-width: 20px;
-	cursor: pointer;
-	overflow: hidden;
-
-	transition: background 100ms ease-out 0s;
-
-    &:hover {
-        background-color: rgba(var(--main-fg), 0.1);
-    }
-}
-
-
 /* Icons */
 
 .octo-hovercontrols {
@@ -201,17 +182,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;
 }
 
-.octo-button {
-    &.octo-hovercontrol {
-        background: rgba(var(--main-fg), 0.1);
-    }
-
-    &.square {
-        padding: 0;
-    }
-}
-
-
 .octo-hoverbutton {
     display: inline-flex;
     align-items: center;