From 5318b53b2541c9c78aa43006f85155567f3069c5 Mon Sep 17 00:00:00 2001 From: shankar ambady Date: Thu, 27 Jun 2024 12:55:23 -0400 Subject: [PATCH 1/7] setting 100px as default width for buttons --- frontends/ol-components/src/components/Button/Button.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/frontends/ol-components/src/components/Button/Button.tsx b/frontends/ol-components/src/components/Button/Button.tsx index 21b775ec88..5e77a5777c 100644 --- a/frontends/ol-components/src/components/Button/Button.tsx +++ b/frontends/ol-components/src/components/Button/Button.tsx @@ -94,6 +94,7 @@ const ButtonStyled = styled.button((props) => { ":disabled": { cursor: "default", }, + minWidth: "100px", }, ...sizeStyles(size, hasBorder, theme), // responsive From ead6c8e450bd936eb15b9f8a353e8256ae584839 Mon Sep 17 00:00:00 2001 From: shankar ambady Date: Thu, 27 Jun 2024 15:40:03 -0400 Subject: [PATCH 2/7] fixing action button style --- frontends/ol-components/src/components/Button/Button.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/frontends/ol-components/src/components/Button/Button.tsx b/frontends/ol-components/src/components/Button/Button.tsx index 5e77a5777c..245987c87e 100644 --- a/frontends/ol-components/src/components/Button/Button.tsx +++ b/frontends/ol-components/src/components/Button/Button.tsx @@ -304,6 +304,7 @@ type ActionButtonProps = Omit & const actionStyles = (size: ButtonSize) => { return { + minWidth: "auto", padding: 0, height: { small: "32px", From 155efcfaf14ae593a300897e7904b9b1f5a5c7f0 Mon Sep 17 00:00:00 2001 From: shankar ambady Date: Thu, 27 Jun 2024 16:56:36 -0400 Subject: [PATCH 3/7] fixing styles for menubutton --- .../src/page-components/Header/MenuButton.tsx | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/frontends/mit-open/src/page-components/Header/MenuButton.tsx b/frontends/mit-open/src/page-components/Header/MenuButton.tsx index 5897c1a43d..f0f85cc8f1 100644 --- a/frontends/mit-open/src/page-components/Header/MenuButton.tsx +++ b/frontends/mit-open/src/page-components/Header/MenuButton.tsx @@ -1,4 +1,4 @@ -import { Button, styled } from "ol-components" +import { styled } from "ol-components" import { RiMenuLine } from "@remixicon/react" import React from "react" @@ -23,14 +23,25 @@ const MenuButtonInner = styled.div({ alignItems: "flex-start", }) -const StyledMenuButton = styled(Button)({ +const StyledMenuButton = styled.button(({ theme }) => ({ padding: "0", background: "transparent", "&:hover:not(:disabled)": { background: "transparent", }, touchAction: "none", -}) + textAlign: "center", + display: "inline-flex", + justifyContent: "center", + alignItems: "center", + color: theme.palette.text.primary, + transition: `background ${theme.transitions.duration.short}ms`, + cursor: "pointer", + borderWidth: "1px", + borderColor: "currentcolor", + borderStyle: "none", + color: theme.custom.colors.white, +})) interface MenuButtonProps { text?: string From a81e718fb08d43c2317b33159551ca0a31ef63d8 Mon Sep 17 00:00:00 2001 From: shankar ambady Date: Thu, 27 Jun 2024 17:16:06 -0400 Subject: [PATCH 4/7] setting tab width to auto --- .../ol-components/src/components/TabButtons/TabButtonList.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/frontends/ol-components/src/components/TabButtons/TabButtonList.tsx b/frontends/ol-components/src/components/TabButtons/TabButtonList.tsx index 3e1d7554fd..7bbdbb4540 100644 --- a/frontends/ol-components/src/components/TabButtons/TabButtonList.tsx +++ b/frontends/ol-components/src/components/TabButtons/TabButtonList.tsx @@ -34,6 +34,7 @@ const TabButtonList: React.FC = styled((props: TabListProps) => ( const tabStyles = ({ theme }: { theme: Theme }) => css({ + minWidth: "auto", ":focus-visible": { outlineOffset: "-1px", }, From 760d11734cf8f51b3f757a3a5e3ed189df592b6e Mon Sep 17 00:00:00 2001 From: shankar ambady Date: Thu, 27 Jun 2024 17:19:51 -0400 Subject: [PATCH 5/7] removing unused prop --- frontends/mit-open/src/page-components/Header/MenuButton.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontends/mit-open/src/page-components/Header/MenuButton.tsx b/frontends/mit-open/src/page-components/Header/MenuButton.tsx index f0f85cc8f1..342ef4c046 100644 --- a/frontends/mit-open/src/page-components/Header/MenuButton.tsx +++ b/frontends/mit-open/src/page-components/Header/MenuButton.tsx @@ -49,7 +49,7 @@ interface MenuButtonProps { } const MenuButton: React.FC = ({ text, onClick }) => ( - + {text ? {text} : ""} From fd96399e17d3e2174a60329cc0436f272029046b Mon Sep 17 00:00:00 2001 From: shankar ambady Date: Thu, 27 Jun 2024 17:24:31 -0400 Subject: [PATCH 6/7] removing dup css --- frontends/mit-open/src/page-components/Header/MenuButton.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/frontends/mit-open/src/page-components/Header/MenuButton.tsx b/frontends/mit-open/src/page-components/Header/MenuButton.tsx index 342ef4c046..1ee2e0b433 100644 --- a/frontends/mit-open/src/page-components/Header/MenuButton.tsx +++ b/frontends/mit-open/src/page-components/Header/MenuButton.tsx @@ -40,7 +40,6 @@ const StyledMenuButton = styled.button(({ theme }) => ({ borderWidth: "1px", borderColor: "currentcolor", borderStyle: "none", - color: theme.custom.colors.white, })) interface MenuButtonProps { From 67ef8d987e9bef9ef3980523bb58fe27a7f211ef Mon Sep 17 00:00:00 2001 From: shankar ambady Date: Fri, 28 Jun 2024 16:16:09 -0400 Subject: [PATCH 7/7] removing borderwidth and bordercolor --- frontends/mit-open/src/page-components/Header/MenuButton.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/frontends/mit-open/src/page-components/Header/MenuButton.tsx b/frontends/mit-open/src/page-components/Header/MenuButton.tsx index 1ee2e0b433..b0ae726e17 100644 --- a/frontends/mit-open/src/page-components/Header/MenuButton.tsx +++ b/frontends/mit-open/src/page-components/Header/MenuButton.tsx @@ -37,8 +37,6 @@ const StyledMenuButton = styled.button(({ theme }) => ({ color: theme.palette.text.primary, transition: `background ${theme.transitions.duration.short}ms`, cursor: "pointer", - borderWidth: "1px", - borderColor: "currentcolor", borderStyle: "none", }))