Removed all the octo-button usages and replaced them with Button

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);
         }

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>
 

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;