Merge pull request #18 from oleksii-suprun-github/os-03-return-all-daisyui-input-components

feat: return default daisy ui input styling

Author: alex-suprun-git

app/components/ChargeStationsForm/index.tsx

@@ -66,7 +66,7 @@ export default function ChargeStationsForm({
 
         <div className="flex justify-end md:mt-7 md:w-1/3 md:justify-start">
           <button
-            className="btn btn-sm border-0 bg-brand-aqua text-black hover:bg-brand-light-aqua"
+            className="btn border-0 bg-brand-aqua text-black hover:bg-brand-light-aqua"
             type="submit"
             disabled={!isValid}
           >

app/components/ParametersForm/index.tsx

@@ -88,7 +88,7 @@ export default function ParametersForm({
         />
       </div>
       <button
-        className="btn btn-sm ml-auto mt-10 border-0 bg-brand-aqua text-black hover:bg-brand-light-aqua"
+        className="btn ml-auto mt-10 border-0 bg-brand-aqua text-black hover:bg-brand-light-aqua"
         type="submit"
         disabled={!isValid}
       >

app/globals.css

@@ -1,67 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-input[type='number'] {
-  -moz-appearance: textfield;
-  appearance: textfield;
-}
-
-input[type='number']::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-input[type='number']::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-.input {
-  @apply block appearance-none rounded-lg border border-blue-600 bg-brand-blue p-2.5 text-white focus:border-blue-500 focus:outline-none focus:ring;
-}
-
-.select {
-  @apply block appearance-none rounded-lg border border-blue-600 bg-brand-blue p-2.5 text-white focus:border-blue-500 focus:outline-none focus:ring;
-}
-
-.btn {
-  @apply inline-flex animate-none cursor-pointer appearance-none items-center justify-center rounded-lg bg-brand-aqua px-6 py-5 font-bold text-black hover:to-brand-light-aqua focus:outline-none;
-}
-
-.btn-sm {
-  @apply px-3 py-3 text-sm;
-}
-
-.btn:disabled,
-.btn[disabled] {
-  @apply cursor-default opacity-5;
-}
-
-.range {
-  @apply h-2 w-full appearance-none rounded-full bg-stone-300 focus:outline-none;
-}
-
-.range::-webkit-slider-thumb {
-  @apply h-4 w-4 cursor-pointer appearance-none rounded-full border-2 border-white bg-brand-aqua shadow-md transition-transform duration-200 ease-in-out;
-}
-
-.range::-webkit-slider-thumb:hover {
-  @apply scale-110;
-}
-
-.range::-webkit-slider-thumb:focus {
-  @apply scale-125;
-}
-
-.range::-moz-range-thumb {
-  @apply h-4 w-4 cursor-pointer rounded-full border-2 border-white bg-brand-aqua shadow-md transition-transform duration-200 ease-in-out;
-}
-
-.range::-moz-range-thumb:hover {
-  @apply scale-110;
-}
-
-.range::-moz-range-thumb:focus {
-  @apply scale-125;
-}

app/ui-lib/FormInput/index.tsx

@@ -38,7 +38,6 @@ const FormInput = ({
       case 'select':
         return (
           <div className="relative">
-            <span className="absolute right-[10px] top-[11px] text-sm">▼</span>
             <select
               {...register}
               className={clsx('select w-full bg-brand-blue placeholder:text-gray-400', className)}