UI tweaks (#23346)

* remove redundant per-view toasters in settings

* add variants to standardize dialog footer button layouts

* remove text-md

this class name compiles to nothing in tailwind. we used to add it to prevent iOS from zooming when focusing on an input, but that is now solved via the viewport meta in index.html

* make wizard footers consistent with dialog footers

* consistent destructive button style

remove text-white from individual buttons and add it to the variant

web/src/components/classification/wizard/Step1NameAndDefine.tsx

@@ -214,7 +214,7 @@ export default function Step1NameAndDefine({
                 </FormLabel>
                 <FormControl>
                   <Input
-                    className="text-md h-8"
+                    className="h-8"
                     placeholder={t("wizard.step1.namePlaceholder")}
                     {...field}
                   />
@@ -457,7 +457,7 @@ export default function Step1NameAndDefine({
                       <FormControl>
                         <div className="flex items-center gap-2">
                           <Input
-                            className="text-md h-8"
+                            className="h-8"
                             placeholder={t("wizard.step1.classPlaceholder")}
                             {...field}
                           />
@@ -489,7 +489,7 @@ export default function Step1NameAndDefine({
         </form>
       </Form>
 
-      <div className="flex flex-col gap-3 pt-3 sm:flex-row sm:justify-end sm:gap-4">
+      <div className="flex flex-col-reverse gap-2 pt-3 sm:flex-row sm:justify-end">
         <Button type="button" onClick={onCancel} className="sm:flex-1">
           {t("button.cancel", { ns: "common" })}
         </Button>

web/src/components/classification/wizard/Step2StateArea.tsx

@@ -458,7 +458,7 @@ export default function Step2StateArea({
         </div>
       </div>
 
-      <div className="flex flex-col gap-3 pt-3 sm:flex-row sm:justify-end sm:gap-4">
+      <div className="flex flex-col-reverse gap-2 pt-3 sm:flex-row sm:justify-end">
         <Button type="button" onClick={onBack} className="sm:flex-1">
           {t("button.back", { ns: "common" })}
         </Button>

web/src/components/classification/wizard/Step3ChooseExamples.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@/components/ui/button";
+import { Button, buttonVariants } from "@/components/ui/button";
 import { useTranslation } from "react-i18next";
 import { useState, useEffect, useCallback, useMemo } from "react";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
@@ -540,7 +540,7 @@ export default function Step3ChooseExamples({
             </AlertDialogCancel>
             <AlertDialogAction
               onClick={doRefresh}
-              className="bg-destructive text-white hover:bg-destructive/90"
+              className={cn(buttonVariants({ variant: "destructive" }))}
             >
               {t("button.continue", { ns: "common" })}
             </AlertDialogAction>
@@ -693,7 +693,7 @@ export default function Step3ChooseExamples({
       )}
 
       {!isTraining && (
-        <div className="flex flex-col gap-3 pt-3 sm:flex-row sm:justify-end sm:gap-4">
+        <div className="flex flex-col-reverse gap-2 pt-3 sm:flex-row sm:justify-end">
           <Button type="button" onClick={handleBack} className="sm:flex-1">
             {t("button.back", { ns: "common" })}
           </Button>