Merge pull request #819 from Dygmalab/uiBugFixing

UI bug fixing
Dygmalab · Jul 2, 2024 · 08e33da · 08e33da
2 parents 98fcec8 + 14a7e36
commit 08e33da
Show file tree

Hide file tree

Showing 9 changed files with 38 additions and 85 deletions.
diff --git a/src/renderer/components/atoms/Toggle.tsx b/src/renderer/components/atoms/Toggle.tsx
@@ -16,7 +16,7 @@ const toggleVariants = cva(
       },
       size: {
         default: "h-9 px-[16px] text-[13px] rounded-sm",
-        sm: "h-8 px-2.5 text-[11px] rounded-sm",
+        sm: "h-8 px-2.5 text-[11px] rounded-2sm",
         lg: "h-11 px-5",
       },
     },

diff --git a/src/renderer/components/molecules/CustomToggleGroup/ToggleGroupKeyboardViewMode.tsx b/src/renderer/components/molecules/CustomToggleGroup/ToggleGroupKeyboardViewMode.tsx
@@ -17,7 +17,7 @@ const ToggleGroupKeyboardViewMode = ({ value, onValueChange }: ToggleGroupLayout
       <Tooltip>
         <TooltipTrigger asChild>
           <div>
-            <ToggleGroupItem asChild={false} value="keyboard" className="sm:px-2 md:px-2 lg:px-2 xl:px-[16px]">
+            <ToggleGroupItem asChild={false} value="keyboard" className="sm:px-2 md:px-2 lg:px-2 xl:px-[16px] !rounded-2sm">
               <IconKeyboard /> <span className="sm:hidden md:hidden lg:hidden xl:inline-flex">{i18n.editor.keys}</span>
             </ToggleGroupItem>
           </div>
@@ -31,7 +31,7 @@ const ToggleGroupKeyboardViewMode = ({ value, onValueChange }: ToggleGroupLayout
       <Tooltip>
         <TooltipTrigger asChild>
           <div>
-            <ToggleGroupItem asChild={false} value="color" className="sm:px-2 md:px-2 lg:px-2 xl:px-[16px]">
+            <ToggleGroupItem asChild={false} value="color" className="sm:px-2 md:px-2 lg:px-2 xl:px-[16px] !rounded-2sm">
               <IconFlashlight /> <span className="sm:hidden md:hidden lg:hidden xl:inline-flex">{i18n.editor.color.color}</span>
             </ToggleGroupItem>
           </div>

diff --git a/src/renderer/components/molecules/CustomToggleGroup/ToggleGroupLayoutViewMode.tsx b/src/renderer/components/molecules/CustomToggleGroup/ToggleGroupLayoutViewMode.tsx
@@ -40,10 +40,10 @@ const ToggleGroupLayoutViewMode = ({
       </TooltipProvider>
     </Heading>
     <ToggleGroup type="single" value={value} onValueChange={onValueChange} size="sm">
-      <ToggleGroupItem value="standard">
+      <ToggleGroupItem value="standard" size="sm">
         <IconEditModeStandardView size="sm" /> {i18n.editor.editMode.standardView}
       </ToggleGroupItem>
-      <ToggleGroupItem value="single">
+      <ToggleGroupItem value="single" size="sm">
         <IconEditModeSingleView size="sm" /> {i18n.editor.editMode.singleView}
       </ToggleGroupItem>
     </ToggleGroup>

diff --git a/src/renderer/modules/DeviceManager/HelpSupportLink.tsx b/src/renderer/modules/DeviceManager/HelpSupportLink.tsx
@@ -7,7 +7,7 @@ import { i18n } from "@Renderer/i18n";
 const HelpSupportLink = () => (
   <div className="w-full flex justify-end mt-auto pb-4">
     <a
-      href="https://dygma.com/pages/contact-us"
+      href="https://dygma.com/pages/support"
       className="help-wrapper flex flex-nowrap gap-2 max-w-[264px] group [&_svg]:mt-1 [&_svg]:flex-shrink-0 [&_svg]:flex-grow-0 [&_svg]:flex-basis-[24px] [&_svg]:text-gray-500 [&_svg]:dark:text-gray-100 no-underline hover:no-underline"
     >
       <IconBugWarning />

diff --git a/src/renderer/modules/KeyPickerKeyboard/DualFunctionPicker.tsx b/src/renderer/modules/KeyPickerKeyboard/DualFunctionPicker.tsx
@@ -135,7 +135,7 @@ const DualFunctionPicker = (props: DualFunctionPickerProps) => {
         <Heading headingLevel={5} renderAs="h5" className="text-ssm">
           {i18n.general.layer}
         </Heading>
-        <div className="groupButtons flex gap-1 mt-2 max-w-[auto]">
+        <div className="p-1 inline-flex flex-nowrap gap-1 mt-2 w-auto rounded-md bg-white dark:bg-gray-900/20">
           {layerKey.map((item: any, index: number) => (
             <Button
               variant="config"
@@ -145,7 +145,7 @@ const DualFunctionPicker = (props: DualFunctionPickerProps) => {
               onClick={() => onKeySelect(item.keynum + keyCode.base)}
               selected={!!(keyCode.modified > 0 && item.keynum === keyCode.modified)}
               disabled={disabled || activeTab === "super"}
-              className="w-[40px]"
+              className={`w-[40px] ${index === 0 ? "hidden" : ""}`}
             >
               {item.nameStd ? item.nameStd : item.keynum}
             </Button>
@@ -156,7 +156,7 @@ const DualFunctionPicker = (props: DualFunctionPickerProps) => {
         <Heading headingLevel={5} renderAs="h5" className="text-ssm">
           {i18n.general.modifier}
         </Heading>
-        <div className="groupButtons flex gap-1 mt-2">
+        <div className="p-1 inline-flex flex-nowrap gap-1 mt-2 w-auto rounded-md bg-white dark:bg-gray-900/20">
           {modKey.map((item, index) => (
             <Button
               variant="config"
@@ -166,7 +166,7 @@ const DualFunctionPicker = (props: DualFunctionPickerProps) => {
               onClick={() => onKeySelect(item.keynum + keyCode.base)}
               selected={!!(keyCode.modified > 0 && item.keynum === keyCode.modified)}
               disabled={disabled || activeTab === "super"}
-              className="w-[60px]"
+              className={`w-[60px] ${index === 0 ? "hidden" : ""}`}
             >
               {item.nameStd ? item.nameStd : item.keynum}
             </Button>

diff --git a/src/renderer/modules/KeysTabs/DelayTab.tsx b/src/renderer/modules/KeysTabs/DelayTab.tsx
@@ -9,21 +9,6 @@ import { Button } from "@Renderer/components/atoms/Button";
 import Heading from "@Renderer/components/atoms/Heading";
 
 const Styles = Styled.div`
-display: flex;
-flex-wrap: wrap;
-height: inherit;
-h4 {
-    font-size: 16px;
-    flex: 0 0 100%;
-    width: 100%;
-}
-.description {
-  margin-top: 8px;
-  font-size: 14px;
-  color: ${({ theme }) => theme.styles.macro.descriptionColor};
-  flex: 0 0 100%;
-  width: 100%;
-}
 .form-control {
     color: ${({ theme }) => theme.styles.form.inputColor};
     background: ${({ theme }) => theme.styles.form.inputBackgroundColor};
@@ -39,7 +24,6 @@ h4 {
     margin-bottom: 0;
 }
 .input-group {
-    max-width: 280px;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
     .input-group-text {
@@ -66,10 +50,9 @@ h4 {
   text-align: right;
 }
 .inputGroupRandom {
-  position: relative;
   .inputIcon {
     position: absolute;
-    top: 33%;
+    top: 50%;
     left: 95px;
     transform: translate3d(0, -50%, 0);
     width: 32px;
@@ -174,9 +157,9 @@ class DelayTab extends React.Component<DelayTabProps, DelayTabState> {
   render() {
     const { fixedSelected, fixedValue, randomValue } = this.state;
     return (
-      <Styles>
+      <Styles className="flex flex-wrap h-[inherit]">
         <div className="tabContentWrapper">
-          <Heading renderAs="h4" headingLevel={4}>
+          <Heading renderAs="h4" headingLevel={4} className="flex w-full">
             {i18n.editor.macros.delayTabs.title}
           </Heading>
           <div className="formWrapper">
@@ -206,7 +189,7 @@ class DelayTab extends React.Component<DelayTabProps, DelayTabState> {
           <div className="inputsWrapper mt-3">
             {fixedSelected ? (
               <div className="inputGroupFixed">
-                <div className="input-group max-w-72 relative flex flex-wrap w-full items-stretch">
+                <div className="input-group max-w-full relative flex flex-wrap w-full items-stretch">
                   <input
                     placeholder={i18n.editor.macros.delayTabs.title}
                     min={0}
@@ -222,13 +205,16 @@ class DelayTab extends React.Component<DelayTabProps, DelayTabState> {
                     ms
                   </div>
                 </div>
-                <p className="description">{i18n.editor.macros.delayTabs.minMaxDescription}</p>
+
+                <p className="description mt-2 text-sm w-full text-gray-400 dark:text-gray-200">
+                  {i18n.editor.macros.delayTabs.minMaxDescription}
+                </p>
               </div>
             ) : (
-              <div className="inputGroupRandom">
-                <div className="input-group max-w-72 relative flex flex-wrap w-full items-stretch">
+              <div className="inputGroupRandom relative">
+                <div className="input-group max-w-full relative flex flex-wrap w-full items-stretch">
                   <input
-                    className="inputMin form-control"
+                    className="inputMin form-control w-[120px]"
                     placeholder="Min."
                     min={0}
                     type="number"
@@ -238,7 +224,7 @@ class DelayTab extends React.Component<DelayTabProps, DelayTabState> {
                     value={randomValue.min}
                   />
                   <input
-                    className="inputMax form-control"
+                    className="inputMax form-control  w-[120px]"
                     placeholder="Max"
                     min={1}
                     type="number"
@@ -251,7 +237,7 @@ class DelayTab extends React.Component<DelayTabProps, DelayTabState> {
                     ms
                   </div>
                 </div>
-                <div className="inputIcon">
+                <div className="inputIcon absolute top-1/2 left-1/2 rounded w-8 h-8 p-1 z-10 bg-gray-25 dark:bg-gray-800/20 transform translate-x-[-50%] before:translate-y-[-50%]">
                   <IconMediaShuffle />
                 </div>
                 <p className="description">{i18n.editor.macros.delayTabs.minMaxDescription}</p>

diff --git a/src/renderer/modules/KeysTabs/LayersTab.tsx b/src/renderer/modules/KeysTabs/LayersTab.tsx
@@ -74,11 +74,11 @@ const LayersTab = ({ keyCode, isStandardView, disableMods, onLayerPress }: Layer
             {i18n.editor.standardView.layers.layerSwitch}
           </Heading>
           <p>{i18n.editor.standardView.layers.layerSwitchDescription}</p>
-          <div className="groupButtons flex gap-1">
+          <div className="p-1 inline-flex flex-nowrap gap-1 mt-2 w-auto rounded-md bg-white dark:bg-gray-900/20">
             {shiftButtons.map((button, index) => (
               <Button
                 variant="config"
-                size="sm"
+                size="icon"
                 onClick={() => {
                   onLayerPress(layerDeltaSwitch + index);
                 }}
@@ -96,11 +96,11 @@ const LayersTab = ({ keyCode, isStandardView, disableMods, onLayerPress }: Layer
             {i18n.editor.layers.layerLock}
           </Heading>
           <p>{isStandardView ? i18n.editor.standardView.layers.layerLockDescription : i18n.editor.layers.layerLockDescription}</p>
-          <div className="groupButtons flex gap-1">
+          <div className="p-1 inline-flex flex-nowrap gap-1 mt-2 w-auto rounded-md bg-white dark:bg-gray-900/20">
             {lockButtons.map((button, index) => (
               <Button
                 variant="config"
-                size="sm"
+                size="icon"
                 onClick={() => {
                   onLayerPress(layerDelta + index);
                 }}

diff --git a/src/renderer/modules/KeysTabs/OneShotTab.tsx b/src/renderer/modules/KeysTabs/OneShotTab.tsx
@@ -65,8 +65,8 @@ const OneShotTab = ({ keyCode, onKeySelect, isStandardView }: OneShotTabProps) =
             {i18n.editor.standardView.oneShot.titleModifiers}
           </Heading>
           <p className="description">{i18n.editor.standardView.oneShot.modifiersDescription}</p>
-          <div className="groupButtons groupButtonsGrid mt-2">
-            <div className="buttonsGrid">
+          <div className="p-0 inline-flex flex-nowrap gap-1 mt-2 w-auto rounded-md bg-transparent">
+            <div className="grid gap-1 p-1 bg-white dark:bg-gray-900/20 rounded-md grid-cols-4">
               <Button
                 variant="config"
                 onClick={() => onKeySelect(OneShotDeltaMod + 0)}
@@ -146,68 +146,68 @@ const OneShotTab = ({ keyCode, onKeySelect, isStandardView }: OneShotTabProps) =
             {i18n.editor.standardView.oneShot.titleLayers}
           </Heading>
           <p className="description">{i18n.editor.standardView.oneShot.layersDescription}</p>
-          <div className="groupButtons flex gap-1 mt-2">
+          <div className="p-1 inline-flex flex-nowrap gap-1 mt-2 w-auto rounded-md bg-white dark:bg-gray-900/20">
             <Button
               variant="config"
               onClick={() => onKeySelect(OneShotDeltaLayer + 0)}
               selected={isStandardView ? keyCode === OneShotDeltaLayer + 0 : false}
-              size="sm"
+              size="icon"
             >
               1
             </Button>
             <Button
               variant="config"
               onClick={() => onKeySelect(OneShotDeltaLayer + 1)}
               selected={isStandardView ? keyCode === OneShotDeltaLayer + 1 : false}
-              size="sm"
+              size="icon"
             >
               2
             </Button>
             <Button
               variant="config"
               onClick={() => onKeySelect(OneShotDeltaLayer + 2)}
               selected={isStandardView ? keyCode === OneShotDeltaLayer + 2 : false}
-              size="sm"
+              size="icon"
             >
               3
             </Button>
             <Button
               variant="config"
               onClick={() => onKeySelect(OneShotDeltaLayer + 3)}
               selected={isStandardView ? keyCode === OneShotDeltaLayer + 3 : false}
-              size="sm"
+              size="icon"
             >
               4
             </Button>
             <Button
               variant="config"
               onClick={() => onKeySelect(OneShotDeltaLayer + 4)}
               selected={isStandardView ? keyCode === OneShotDeltaLayer + 4 : false}
-              size="sm"
+              size="icon"
             >
               5
             </Button>
             <Button
               variant="config"
               onClick={() => onKeySelect(OneShotDeltaLayer + 5)}
               selected={isStandardView ? keyCode === OneShotDeltaLayer + 5 : false}
-              size="sm"
+              size="icon"
             >
               6
             </Button>
             <Button
               variant="config"
               onClick={() => onKeySelect(OneShotDeltaLayer + 6)}
               selected={isStandardView ? keyCode === OneShotDeltaLayer + 6 : false}
-              size="sm"
+              size="icon"
             >
               7
             </Button>
             <Button
               variant="config"
               onClick={() => onKeySelect(OneShotDeltaLayer + 7)}
               selected={isStandardView ? keyCode === OneShotDeltaLayer + 7 : false}
-              size="sm"
+              size="icon"
             >
               8
             </Button>

diff --git a/src/renderer/theme/GlobalStyles.ts b/src/renderer/theme/GlobalStyles.ts
@@ -818,39 +818,6 @@ button:focus-visible,
     font-size: 13px;
     margin-bottom: 8px;
   }
-  .groupButtons {
-    display: inline-flex;
-    padding: 4px 2px;
-    flex-wrap: nowrap;
-    background-color: ${({ theme }) => theme.styles.cardButtons.groupButtonsBackground};
-    border-radius: 6px;
-    max-width: 500px;
-    .button-config {
-      width: 42px;
-      margin: 0 2px;
-      padding: 10px 2px;
-      text-align: center;
-      flex: 1;
-    }
-  }
-  .groupButtons.groupButtonsGrid {
-    background-color: transparent;
-    padding: 0;
-    .buttonsGrid {
-      display: grid;
-      grid-template-columns: repeat(4, 112px);
-      grid-template-rows: repeat(2, 1fr);
-      grid-gap: 4px;
-      padding: 4px;
-      background-color: ${({ theme }) => theme.styles.cardButtons.groupButtonsBackground};
-      border-radius: 6px;
-      .button-config {
-        width: 100%;
-        margin: 0;
-        padding: 8px 2px;
-      }
-    }
-  }
 }
 
 .tooltip {