small buttons

effect-ak · Feb 18, 2025 · e81e6c8 · e81e6c8
1 parent f41d571
commit e81e6c8
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 24 deletions.
diff --git a/src/cv-maker/index.html b/src/cv-maker/index.html
@@ -17,23 +17,32 @@
 <body x-data="state" class="flex flex-col p-16 pt-8">
   <!-- navigation -->
   <div 
-    class="no-print pb-2 self-center"
+    class="no-print pb-2 self-center flex gap-2"
     x-init="$watch('mode', value => $dispatch('mode-was-changed', value))"
   >
 
-    <label class="menu-item" :class="{ 'active': mode === 'editor' }">
-      <input type="radio" value="editor" x-model="mode" /> Editor
+    <label 
+      class="hover:cursor-pointer"
+      :class="{ 'text-orange-400 underline': mode === 'editor' }"
+    >
+      <input
+        type="radio"
+        class="appearance-none"
+        value="editor" 
+        x-model="mode" 
+      /> Editor
     </label>
 
     <label 
-      class="menu-item" 
-      :class="{ 'active': mode === 'view' }"
+      class="hover:cursor-pointer" 
+      :class="{ 'text-orange-400 underline': mode === 'view' }"
       x-show="!editorHasError" x-transition
     >
       <input 
         type="radio" 
         value="view" 
         x-model="mode"
+        class="appearance-none"
       /> View
     </label>
 
@@ -52,7 +61,7 @@
   >
     <div class="self-start">
       <button
-        class="btn bg-sky-500 hover:bg-sky-700"
+        class="btn bg-sky-500 hover:bg-sky-700 text-sm"
         x-on:click="$dispatch('resize')"
       >Save as</button>
       <button

diff --git a/src/cv-maker/style.css b/src/cv-maker/style.css
@@ -6,7 +6,7 @@
 }
 
 .btn {
-  @apply  text-sm rounded-full py-2 px-4 text-white font-bold hover:cursor-pointer;
+  @apply text-sm rounded py-1 px-2 text-white font-bold hover:cursor-pointer;
 }
 
 .btn-orange {
@@ -98,20 +98,3 @@ div#location {
   text-transform: uppercase;
   font-size: smaller;
 }
-
-.menu-item {
-  cursor: pointer;
-  padding: 8px 16px;
-  margin-right: 10px;
-  border-radius: 4px;
-  transition: background-color 0.3s;
-}
-
-.menu-item.active {
-  background-color: #007bff;
-  color: #fff;
-}
-
-.menu-item input {
-  display: none;
-}