chore: update toggle style and docs image

Author: yaroslav8765

adminforth/documentation/docs/tutorial/03-Customization/image-94.png

@@ -82,7 +82,7 @@ export const styles = () => ({
     lightToggleCircleActive: "#F9FAFB",
     lightToggleRing: "alias:lightPrimary lighten",
     lightToggleText: "black", 
-    lightToggleBorderUnactive: "alias:lightPrimary lighten",
+    lightToggleBorderUnactive: "#E5E7EB",
     lightToggleBorderActive: "alias:lightPrimary darken",
 
     // colors for dark theme

adminforth/modules/styles.ts

@@ -1,17 +1,17 @@
 <template>
-    <label class="inline-flex items-center cursor-pointer" :class="{'opacity-50' : props.disabled}">
+    <label class="inline-flex items-center cursor-pointer bor" :class="{'opacity-50' : props.disabled}">
         <input :id="id" 
             type="checkbox" 
             value="" class="sr-only peer" 
             :disabled="props.disabled"
             :checked="props.modelValue"
             @change="$emit('update:modelValue', $event.target.checked)"
-            >   
-            <div class="relative min-w-11 h-6 bg-lightToggleBgUnactive peer-focus:outline-none peer-focus:ring-4 
+            > 
+            <div class="border border-lightToggleBorderUnactive relative min-w-11 min-h-6 bg-lightToggleBgUnactive peer-focus:outline-none peer-focus:ring-4 
                 peer-focus:ring-lightToggleRing dark:peer-focus:ring-darkToggleRing rounded-full peer dark:bg-darkToggleBgUnactive 
-                peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full 
-                peer-checked:after:border-lightToggleBorderActive after:content-[''] after:absolute after:top-[2px] 
-                after:start-[2px] after:bg-lightToggleCircleUnactive peer-checked:after:bg-lightToggleCircleActive dark:after:bg-darkToggleCircleUnactive after:border-lightToggleBorderUnactive dark:after:border-darkToggleBorderUnactive after:border after:rounded-full 
+                peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:top-[2px] peer-checked:border-none 
+                peer-checked:after:border-lightToggleBorderActive  after:content-[''] after:absolute after:top-[1px] 
+                after:start-[2px] after:bg-lightToggleCircleUnactive peer-checked:after:bg-lightToggleCircleActive dark:after:bg-darkToggleCircleUnactive after:border-lightToggleBgUnactive dark:after:border-darkToggleBgUnactive after:border after:rounded-full 
                 after:h-5 after:w-5 after:transition-all dark:border-darkToggleBorderUnactive peer-checked:bg-lightToggleBgActive 
                 dark:peer-checked:bg-darkToggleBgActive dark:peer-checked:after:border-darkToggleBorderActive dark:peer-checked:after:bg-darkToggleCircleActive">
             </div>