Settings account page done

src/components/ui/fluent/CategoryButton.tsx

@@ -11,17 +11,15 @@ interface BaseProps {
 
 const CategoryBase = styled.div<BaseProps>`
     /*height: 54px;*/
-    padding: 10px 12px;
+    padding: 9.8px 12px;
     border-radius: 6px;
     margin-bottom: 10px;
-
     color: var(--foreground);
     background: var(--secondary-header);
     gap: 12px;
     display: flex;
     align-items: center;
     flex-direction: row;
-    opacity: .7;
 
     > svg {
         flex-shrink: 0;
@@ -77,19 +75,16 @@ const CategoryBase = styled.div<BaseProps>`
             &:hover {
                 background: var(--secondary-background);
             }
-
-            a {
-                cursor: pointer;
-            }
         `}
 
     ${(props) =>
         props.disabled &&
         css`
-            .content,
+            opacity: .4;
+            /*.content,
             .action {
                 color: var(--tertiary-foreground);
-            }
+            }*/
 
             .action {
                 font-size: 14px;
@@ -102,6 +97,9 @@ const CategoryBase = styled.div<BaseProps>`
             height: 54px;
 
             .content {
+                text-overflow: ellipsis;
+                overflow: hidden;
+                white-space: nowrap;
                 .title {
                     text-transform: uppercase;
                     font-size: 12px;

src/pages/settings/panes/Account.tsx

@@ -25,7 +25,6 @@ import {
 import Tooltip from "../../../components/common/Tooltip";
 import UserIcon from "../../../components/common/user/UserIcon";
 import Button from "../../../components/ui/Button";
-import Overline from "../../../components/ui/Overline";
 import Tip from "../../../components/ui/Tip";
 import CategoryButton from "../../../components/ui/fluent/CategoryButton";
 
@@ -152,25 +151,21 @@ export const Account = observer(() => {
                 <Text id="app.settings.pages.account.2fa.title" />
             </h3>
             <h5>
-                <Text id="app.settings.pages.account.2fa.description" />
-            </h5>
-            <CategoryButton
-                icon={<Lock size={24} color="var(--error)" />}
-                description={
-                    <>
-                        Two-factor auth is currently work-in-progress, see{" "}
+                {/*<Text id="app.settings.pages.account.2fa.description" />*/}
+                Two-factor authentication is currently work-in-progress, see {` `}
                 <a
                     href="https://gitlab.insrt.uk/insert/rauth/-/issues/2"
                     target="_blank"
                     rel="noreferrer">
                     tracking issue here
-                        </a>
-                        .
-                    </>
-                }
+                </a>.
+            </h5>
+            <CategoryButton
+                icon={<Lock size={24} color="var(--error)" />}
+                description={"Set up 2FA Authentication on your account."}
                 disabled
                 action="chevron">
-                Currently not available
+                Set up Two-factor authentication
             </CategoryButton>
             <h3>
                 <Text id="app.settings.pages.account.manage.title" />

src/pages/settings/panes/Panes.module.scss

@@ -1,8 +1,8 @@
 .user {
     .banner {
         position: relative;
-        margin-top: 5px;
-        margin-bottom: 10px;
+        margin-top: 8px;
+        margin-bottom: 15px;
         gap: 24px;
         width: 100%;
         padding: 12px 10px;