From 2ea640896db079fb9b1c7e59cd5ad675884411ea Mon Sep 17 00:00:00 2001
From: vincentiusvin <54709710+vincentiusvin@users.noreply.github.com>
Date: Fri, 5 Nov 2021 06:05:01 +0700
Subject: [PATCH] Revert "Vertical alignment for tgui button content (#62525)"
 (#62584)

This reverts commit 8e526a575aedab3b39ce682dbf3aa829d8261d1b.
---
 tgui/docs/component-reference.md              |  4 --
 tgui/packages/tgui/components/Button.js       | 38 ++++++++-----------
 .../tgui/styles/components/Button.scss        | 18 ---------
 3 files changed, 16 insertions(+), 44 deletions(-)

diff --git a/tgui/docs/component-reference.md b/tgui/docs/component-reference.md
index d3352c4ccb8..4e74b9de335 100644
--- a/tgui/docs/component-reference.md
+++ b/tgui/docs/component-reference.md
@@ -229,10 +229,6 @@ the baseline alignment.
 over the button.
 - `children: any` - Content to render inside the button.
 - `onClick: function` - Called when element is clicked.
-- `verticalAlign: string` - Align content vertically.
-  - `top` - align content to the ceiling of the button box.
-  - `middle` - align content on the middle of the button box.
-  - `bottom` - align content on the ground of the button box.
 
 ### `Button.Checkbox`
 
diff --git a/tgui/packages/tgui/components/Button.js b/tgui/packages/tgui/components/Button.js
index dc7538a98cd..b4b9b905b18 100644
--- a/tgui/packages/tgui/components/Button.js
+++ b/tgui/packages/tgui/components/Button.js
@@ -35,7 +35,6 @@ export const Button = props => {
     children,
     onclick,
     onClick,
-    verticalAlign,
     ...rest
   } = props;
   const hasContent = !!(content || children);
@@ -68,7 +67,6 @@ export const Button = props => {
         circular && 'Button--circular',
         compact && 'Button--compact',
         iconPosition && 'Button--iconPosition--' + iconPosition,
-        verticalAlign && 'Button--verticalAlign--' + verticalAlign,
         (color && typeof color === 'string')
           ? 'Button--color--' + color
           : 'Button--color--default',
@@ -96,26 +94,22 @@ export const Button = props => {
         }
       }}
       {...computeBoxProps(rest)}>
-      <div className={fluid && 'Button__content--fluid'}>
-        {icon && iconPosition !== 'right' && (
-          <Icon
-            name={icon}
-            color={iconColor}
-            rotation={iconRotation}
-            spin={iconSpin}
-          />
-        )}
-        {content}
-        {children}
-        {icon && iconPosition === 'right' && (
-          <Icon
-            name={icon}
-            color={iconColor}
-            rotation={iconRotation}
-            spin={iconSpin}
-          />
-        )}
-      </div>
+      {(icon && iconPosition !== 'right') && (
+        <Icon
+          name={icon}
+          color={iconColor}
+          rotation={iconRotation}
+          spin={iconSpin} />
+      )}
+      {content}
+      {children}
+      {(icon && iconPosition === 'right') && (
+        <Icon
+          name={icon}
+          color={iconColor}
+          rotation={iconRotation}
+          spin={iconSpin} />
+      )}
     </div>
   );
 
diff --git a/tgui/packages/tgui/styles/components/Button.scss b/tgui/packages/tgui/styles/components/Button.scss
index d777e551ba1..ac2974f9ff8 100644
--- a/tgui/packages/tgui/styles/components/Button.scss
+++ b/tgui/packages/tgui/styles/components/Button.scss
@@ -45,7 +45,6 @@ $bg-map: colors.$bg-map !default;
 .Button {
   position: relative;
   display: inline-block;
-  display: inline-flex;
   line-height: 1.667em;
   padding: 0 0.5em;
   margin-right: base.em(2px);
@@ -91,7 +90,6 @@ $bg-map: colors.$bg-map !default;
 
 .Button--fluid {
   display: block;
-  display: flex;
   margin-left: 0;
   margin-right: 0;
 }
@@ -136,19 +134,3 @@ $bg-map: colors.$bg-map !default;
 .Button--selected {
   @include button-color($color-selected);
 }
-
-.Button--verticalAlign--top {
-  align-items: flex-start;
-}
-
-.Button--verticalAlign--middle {
-  align-items: center;
-}
-
-.Button--verticalAlign--bottom {
-  align-items: flex-end;
-}
-
-.Button__content--fluid {
-  flex: 1;
-}