fix GUI visual bugs in autobone (#985)

SlimeVR · Apr 14, 2024 · fde8ccd · fde8ccd
1 parent ed9a590
commit fde8ccd
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 21 deletions.
diff --git a/gui/public/i18n/en/translation.ftl b/gui/public/i18n/en/translation.ftl
@@ -835,7 +835,7 @@ onboarding-automatic_proportions-check_height-title = Check your height
 onboarding-automatic_proportions-check_height-description = We use your height as a basis of our measurements by using the headset's (HMD) height as an approximation of your actual height, but it's better to check if they are right yourself!
 # All the text is in bold!
 onboarding-automatic_proportions-check_height-calculation_warning = Please press the button while standing <u>upright</u> to calculate your height. You have 3 seconds after you press the button!
-onboarding-automatic_proportions-check_height-guardian_tip = If you are using a standalone VR headset, make sure to have your guardian/
+onboarding-automatic_proportions-check_height-guardian_tip = If you are using a standalone VR headset, make sure to have your guardian /
     boundary turned on so that your height is correct!
 onboarding-automatic_proportions-check_height-fetch_height = I'm standing!
 # Context is that the height is unknown

diff --git a/gui/src/components/commons/TipBox.tsx b/gui/src/components/commons/TipBox.tsx
@@ -8,13 +8,20 @@ export function TipBox({
   children,
   hideIcon = false,
   whitespace = false,
+  className,
 }: {
   children: ReactNode;
   hideIcon?: boolean;
   whitespace?: boolean;
+  className?: string;
 }) {
   return (
-    <div className="flex flex-row gap-4 bg-accent-background-50 p-4 rounded-md">
+    <div
+      className={classNames(
+        'flex flex-row gap-4 bg-accent-background-50 p-4 rounded-md',
+        className
+      )}
+    >
       <div
         className={classNames(
           'fill-accent-background-20 flex flex-col justify-center',

diff --git a/gui/src/components/onboarding/pages/body-proportions/AutomaticProportions.tsx b/gui/src/components/onboarding/pages/body-proportions/AutomaticProportions.tsx
@@ -13,7 +13,7 @@ import { Recording } from './autobone-steps/Recording';
 import { StartRecording } from './autobone-steps/StartRecording';
 import { VerifyResultsStep } from './autobone-steps/VerifyResults';
 import { useCountdown } from '@/hooks/countdown';
-import { CheckHeight } from './autobone-steps/СheckHeight';
+import { CheckHeight } from './autobone-steps/CheckHeight';
 import { PreparationStep } from './autobone-steps/Preparation';
 
 export function AutomaticProportionsPage() {
@@ -62,7 +62,7 @@ export function AutomaticProportionsPage() {
             ></StepperSlider>
           </div>
         </div>
-        <div className="w-full pb-4 flex flex-grow flex-row mobile:justify-center">
+        <div className="w-full pb-4 flex flex-row mobile:justify-center">
           <Button
             variant="secondary"
             onClick={startCountdown}

diff --git a/...roportions/autobone-steps/СheckHeight.tsx → ...roportions/autobone-steps/CheckHeight.tsx b/...roportions/autobone-steps/СheckHeight.tsx → ...roportions/autobone-steps/CheckHeight.tsx
@@ -117,7 +117,7 @@ export function CheckHeight({
                       'onboarding-automatic_proportions-check_height-fetch_height'
                     )}
               </Button>
-              <TipBox whitespace={true}>
+              <TipBox className="break-words">
                 {l10n.getString(
                   'onboarding-automatic_proportions-check_height-guardian_tip'
                 )}

diff --git a/gui/src/components/onboarding/pages/body-proportions/autobone-steps/Recording.tsx b/gui/src/components/onboarding/pages/body-proportions/autobone-steps/Recording.tsx
@@ -93,7 +93,7 @@ export function Recording({
             )}
           </Typography>
         </div>
-        <ol className="list-decimal mobile:px-4">
+        <ol className="list-decimal mobile:px-4 nsmol:hidden">
           <>
             {l10n
               .getString('onboarding-automatic_proportions-recording-steps')

diff --git a/gui/src/components/onboarding/pages/body-proportions/autobone-steps/StartRecording.tsx b/gui/src/components/onboarding/pages/body-proportions/autobone-steps/StartRecording.tsx
@@ -44,7 +44,7 @@ export function StartRecording({
 
   return (
     <>
-      <div className="flex flex-col flex-grow">
+      <div className="flex flex-col flex-grow gap-3">
         <div className="flex flex-row flex-grow">
           <div className="flex flex-grow flex-col gap-4">
             <Typography variant="main-title" bold>
@@ -59,7 +59,7 @@ export function StartRecording({
                 )}
               </Typography>
             </div>
-            <ol className="list-decimal mobile:px-4">
+            <ol className="list-decimal mobile:px-4 nsmol:hidden">
               <>
                 {l10n
                   .getString('onboarding-automatic_proportions-recording-steps')
@@ -71,7 +71,7 @@ export function StartRecording({
                   ))}
               </>
             </ol>
-            <div className="flex">
+            <div className="flex nsmol:hidden">
               <TipBox>{l10n.getString('tips-do_not_move_heels')}</TipBox>
             </div>
           </div>
@@ -100,6 +100,9 @@ export function StartRecording({
           </button>
         </div>
 
+        <div className="flex smol:hidden">
+          <TipBox>{l10n.getString('tips-do_not_move_heels')}</TipBox>
+        </div>
         <div className="flex gap-3 mobile:justify-between">
           <Button
             variant={variant === 'onboarding' ? 'secondary' : 'tertiary'}

diff --git a/gui/tailwind.config.ts b/gui/tailwind.config.ts
@@ -1,7 +1,7 @@
-import plugin from 'tailwindcss/plugin'
-import forms from '@tailwindcss/forms'
-import gradient from 'tailwind-gradient-mask-image'
-import type { Config } from 'tailwindcss'
+import plugin from 'tailwindcss/plugin';
+import forms from '@tailwindcss/forms';
+import gradient from 'tailwind-gradient-mask-image';
+import type { Config } from 'tailwindcss';
 
 const colors = {
   'blue-gray': {
@@ -156,14 +156,16 @@ const config = {
   content: ['./src/**/*.{js,jsx,ts,tsx}'],
   theme: {
     screens: {
+      nsmol: { raw: 'not (min-width: 525px)' },
+      smol: '525px',
       mobile: { raw: 'not (min-width: 800px)' },
       xs: '800px',
       sm: '900px',
       md: '1100px',
       'md-max': { raw: 'not (min-width: 1100px)' },
       lg: '1300px',
       xl: '1600px',
-      tall: { raw: '(min-height: 800px)'}
+      tall: { raw: '(min-height: 800px)' },
     },
     extend: {
       colors: {
@@ -229,14 +231,13 @@ const config = {
       },
     },
     data: {
-      checked: 'checked=true'
-    }
+      checked: 'checked=true',
+    },
   },
   plugins: [
     forms,
     gradient,
     plugin(function ({ addUtilities }) {
-
       const textConfig = (fontSize: any, fontWeight: any) => ({
         fontSize,
         fontWeight,
@@ -251,10 +252,10 @@ const config = {
         '.text-standard-bold': textConfig('calc(var(--font-size-standard) / 16)', 700),
       });
     }),
-    plugin(function({ addVariant }) {
-      addVariant('checked-hover', ['&:hover', '&[data-checked=true]'])
-    })
+    plugin(function ({ addVariant }) {
+      addVariant('checked-hover', ['&:hover', '&[data-checked=true]']);
+    }),
   ],
-} satisfies Config
+} satisfies Config;
 
 export default config;