Merge pull request #3936 from nocodb/fix/ring-opacity

packages/nc-gui/assets/style.scss

@@ -87,7 +87,7 @@ a {
 }
 
 // for highlighting toolbar menu item
-.nc-active-btn > .ant-btn{
+.nc-active-btn > .ant-btn {
   @apply bg-primary bg-opacity-20 hover:(bg-primary bg-opacity-20);
 }
 
@@ -205,10 +205,10 @@ a {
 }
 
 .scaling-btn {
-  @apply z-1 relative color-transition border border-gray-300 rounded-md p-3 bg-gray-100/50 text-white;
+  @apply z-1 relative color-transition rounded-md px-4 py-2 text-white;
 
   &::after {
-    @apply rounded-md absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary;
+    @apply ring-opacity-100 ring-[2px] ring-slate-300 rounded absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary bg-opacity-100;
     content: '';
     z-index: -1;
   }
@@ -255,7 +255,7 @@ a {
 }
 
 .ant-dropdown-menu-item, .ant-menu-item {
-  @apply !py-0 active:(ring ring-accent);
+  @apply !py-0 active:(ring ring-accent ring-opacity-100);
 }
 
 .ant-dropdown-menu-title-content,
@@ -263,7 +263,7 @@ a {
   @apply !py-0;
 }
 
-.ant-dropdown-menu-submenu-title{
+.ant-dropdown-menu-submenu-title {
   @apply !pr-2;
 }
 

packages/nc-gui/components/cell/attachment/Carousel.vue

@@ -55,7 +55,7 @@ onClickOutside(carouselRef, () => {
         </div>
 
         <div
-          class="select-none group hover:ring active:ring-accent cursor-pointer leading-8 inline-block px-3 py-1 bg-gray-300 text-white mb-4 text-center rounded shadow"
+          class="select-none group hover:ring active:ring-accent ring-opactiy-100 cursor-pointer leading-8 inline-block px-3 py-1 bg-gray-300 text-white mb-4 text-center rounded shadow"
           @click.stop="downloadFile(selectedImage)"
         >
           <h3 class="group-hover:text-primary">{{ selectedImage && selectedImage.title }}</h3>

packages/nc-gui/components/cell/attachment/Modal.vue

@@ -89,7 +89,7 @@ function onClick(item: Record<string, any>) {
         <general-overlay
           v-model="isOverDropZone"
           inline
-          class="text-white ring ring-accent bg-gray-700/75 flex items-center justify-center gap-2 backdrop-blur-xl"
+          class="text-white ring ring-accent ring-opacity-100 bg-gray-700/75 flex items-center justify-center gap-2 backdrop-blur-xl"
         >
           <MaterialSymbolsFileCopyOutline class="text-accent" height="35" width="35" />
           <div class="text-white text-3xl">Drop here</div>
@@ -161,7 +161,7 @@ function onClick(item: Record<string, any>) {
   .nc-attach-file {
     @apply select-none cursor-pointer color-transition flex items-center gap-1 border-1 p-2 rounded
     @apply hover:(bg-primary bg-opacity-10 text-primary ring);
-    @apply active:(ring-accent bg-primary bg-opacity-20);
+    @apply active:(ring-accent ring-opacity-100 bg-primary bg-opacity-20);
   }
 
   .nc-attachment-item {
@@ -182,7 +182,7 @@ function onClick(item: Record<string, any>) {
       }
 
       &:active::after {
-        @apply ring ring-accent shadow transform scale-103;
+        @apply ring ring-accent ring-opacity-100 shadow transform scale-103;
       }
     }
   }

packages/nc-gui/components/cell/attachment/index.vue

@@ -135,7 +135,7 @@ const { isSharedForm } = useSmartsheetStoreOrThrow()
         v-model="isOverDropZone"
         inline
         :target="currentCellRef"
-        class="text-white text-lg ring ring-accent bg-gray-700/75 flex items-center justify-center gap-2 backdrop-blur-xl"
+        class="group cursor-pointer flex gap-1 items-center active:(ring ring-accent ring-opacity-100) rounded border-1 p-1 shadow-sm hover:(bg-primary bg-opacity-10) dark:(!bg-slate-500)"
       >
         <MaterialSymbolsFileCopyOutline class="text-accent" /> Drop here
       </general-overlay>
@@ -217,7 +217,7 @@ const { isSharedForm } = useSmartsheetStoreOrThrow()
 .nc-cell {
   .nc-attachment-cell {
     .nc-attachment {
-      @apply w-[50px] h-[50px] min-h-[50px] min-w-[50px];
+      @apply w-[50px] h-[50px] min-h-[50px] min-w-[50px] ring-1 ring-gray-300 rounded;
     }
 
     .ghost,

packages/nc-gui/components/dashboard/TreeView.vue

@@ -522,7 +522,7 @@ function openTableCreateDialog() {
 }
 
 :deep(.ant-dropdown-menu-item) {
-  @apply !py-0 active:(ring ring-accent);
+  @apply !py-0 active:(ring ring-accent ring-opacity-100);
 }
 
 :deep(.ant-dropdown-menu-title-content) {

packages/nc-gui/components/general/MiniSidebar.vue

@@ -78,7 +78,7 @@ const logout = () => {
                 </span>
               </template>
 
-              <a-menu-item class="active:(ring ring-accent)">
+              <a-menu-item class="active:(ring ring-accent ring-opacity-100)">
                 <div
                   v-e="['c:project:create:xcdb']"
                   class="group flex items-center gap-2 py-2 hover:text-primary"

packages/nc-gui/layouts/base.vue

@@ -134,7 +134,7 @@ hooks.hook('page:finish', () => {
 
 <style lang="scss">
 .nc-lang-btn {
-  @apply color-transition flex items-center justify-center fixed bottom-10 right-10 z-99 w-12 h-12 rounded-full shadow-md shadow-gray-500 p-2 !bg-primary text-white active:(ring ring-accent) hover:(ring ring-accent);
+  @apply color-transition flex items-center justify-center fixed bottom-10 right-10 z-99 w-12 h-12 rounded-full shadow-md shadow-gray-500 p-2 !bg-primary text-white ring-opacity-100 active:(ring ring-accent) hover:(ring ring-accent);
 
   &::after {
     @apply rounded-full absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary;
@@ -143,11 +143,11 @@ hooks.hook('page:finish', () => {
   }
 
   &:hover::after {
-    @apply transform scale-110 ring ring-accent;
+    @apply transform scale-110 ring ring-accent ring-opacity-100;
   }
 
   &:active::after {
-    @apply ring ring-accent;
+    @apply ring ring-accent ring-opacity-100;
   }
 }
 </style>

packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue

@@ -121,7 +121,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
               </div>
 
               <div class="text-center my-9">
-                <button type="submit" class="submit" @click="submitForm">
+                <button type="submit" class="scaling-btn bg-opacity-100" @click="submitForm">
                   {{ $t('general.submit') }}
                 </button>
               </div>
@@ -162,23 +162,5 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
   .nc-input {
     @apply w-full rounded p-2 min-h-[40px] flex items-center border-solid border-1 border-primary;
   }
-
-  .submit {
-    @apply z-1 relative color-transition rounded p-3 text-white shadow-sm;
-
-    &::after {
-      @apply rounded absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary;
-      content: '';
-      z-index: -1;
-    }
-
-    &:hover::after {
-      @apply transform scale-110 ring ring-accent;
-    }
-
-    &:active::after {
-      @apply ring ring-accent;
-    }
-  }
 }
 </style>

packages/nc-gui/pages/forgot-password.vue

@@ -55,7 +55,7 @@ function resetError() {
       <div
         class="bg-white mt-[60px] relative flex flex-col justify-center gap-2 w-full max-w-[500px] mx-auto p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
       >
-        <LazyGeneralNocoIcon class="color-transition hover:(ring ring-accent)" :animate="isLoading" />
+        <LazyGeneralNocoIcon class="color-transition hover:(ring ring-accent ring-opacity-100)" :animate="isLoading" />
 
         <div class="self-center flex flex-col justify-center items-center text-center gap-2">
           <h1 class="prose-2xl font-bold my-4 w-full">{{ $t('title.resetPassword') }}</h1>
@@ -89,7 +89,7 @@ function resetError() {
           </a-form-item>
 
           <div class="self-center flex flex-col gap-4 items-center justify-center w-full">
-            <button class="submit" type="submit">
+            <button class="scaling-btn bg-opacity-100" type="submit">
               <span class="flex items-center gap-2">
                 <MdiLogin />
                 {{ $t('activity.sendEmail') }}
@@ -111,25 +111,7 @@ function resetError() {
 .forgot-password {
   .ant-input-affix-wrapper,
   .ant-input {
-    @apply !appearance-none my-1 border-1 border-solid border-primary/50 rounded;
-  }
-
-  .submit {
-    @apply z-1 relative color-transition rounded p-3 text-white shadow;
-
-    &::after {
-      @apply rounded absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary;
-      content: '';
-      z-index: -1;
-    }
-
-    &:hover::after {
-      @apply transform scale-110 ring ring-accent;
-    }
-
-    &:active::after {
-      @apply ring ring-accent;
-    }
+    @apply !appearance-none my-1 border-1 border-solid border-primary border-opacity-50 rounded;
   }
 }
 </style>

packages/nc-gui/pages/index/index/[projectId].vue

@@ -19,7 +19,7 @@ useSidebar('nc-left-sidebar', { hasSidebar: false })
 
 const route = useRoute()
 
-const { project, loadProject, updateProject, isLoading } = useProject(route.params.projectId as string)
+const { project, loadProject, updateProject, isLoading } = useProject()
 
 await loadProject()
 
@@ -94,7 +94,7 @@ onMounted(async () => {
       </a-form-item>
 
       <div class="text-center">
-        <button v-e="['a:project:edit:rename']" type="submit" class="submit">
+        <button v-e="['a:project:edit:rename']" type="submit" class="scaling-btn bg-opacity-100">
           <span class="flex items-center gap-2">
             <MaterialSymbolsRocketLaunchOutline />
             {{ $t('general.edit') }}
@@ -109,25 +109,7 @@ onMounted(async () => {
 .update-project {
   .ant-input-affix-wrapper,
   .ant-input {
-    @apply !appearance-none my-1 border-1 border-solid rounded;
-  }
-
-  .submit {
-    @apply z-1 relative color-transition rounded p-3 text-white shadow-sm;
-
-    &::after {
-      @apply rounded absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary;
-      content: '';
-      z-index: -1;
-    }
-
-    &:hover::after {
-      @apply transform scale-110 ring ring-accent;
-    }
-
-    &:active::after {
-      @apply ring ring-accent;
-    }
+    @apply !appearance-none my-1 border-1 border-solid border-primary border-opacity-50 rounded;
   }
 }
 </style>

packages/nc-gui/pages/index/index/create.vue

@@ -92,7 +92,7 @@ onMounted(async () => {
       </a-form-item>
 
       <div class="text-center">
-        <button class="submit" type="submit">
+        <button class="scaling-btn bg-opacity-100" type="submit">
           <span class="flex items-center gap-2">
             <MaterialSymbolsRocketLaunchOutline />
             {{ $t('general.create') }}
@@ -107,25 +107,7 @@ onMounted(async () => {
 .create {
   .ant-input-affix-wrapper,
   .ant-input {
-    @apply !appearance-none my-1 border-1 border-solid rounded;
-  }
-
-  .submit {
-    @apply z-1 relative color-transition rounded p-3 text-white shadow-sm;
-
-    &::after {
-      @apply rounded absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary;
-      content: '';
-      z-index: -1;
-    }
-
-    &:hover::after {
-      @apply transform scale-110 ring ring-accent;
-    }
-
-    &:active::after {
-      @apply ring ring-accent;
-    }
+    @apply !appearance-none my-1 border-1 border-solid border-primary border-opacity-50 rounded;
   }
 }
 </style>

packages/nc-gui/pages/index/index/index.vue

@@ -273,14 +273,14 @@ onBeforeMount(loadProjects)
 
 <style scoped>
 .nc-action-btn {
-  @apply text-gray-500 group-hover:text-accent active:(ring ring-accent) cursor-pointer p-2 w-[30px] h-[30px] hover:bg-gray-300/50 rounded-full;
+  @apply text-gray-500 group-hover:text-accent active:(ring ring-accent ring-opacity-100) cursor-pointer p-2 w-[30px] h-[30px] hover:bg-gray-300/50 rounded-full;
 }
 
 .nc-new-project-menu {
   @apply cursor-pointer z-1 relative color-transition rounded-md px-3 py-2 text-white;
 
   &::after {
-    @apply rounded-md absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary bg-opacity-100;
+    @apply ring-opacity-100 rounded-md absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary bg-opacity-100;
     content: '';
     z-index: -1;
   }

packages/nc-gui/pages/index/user/index.vue

@@ -111,7 +111,7 @@ const resetError = () => {
           </a-form-item>
 
           <div class="flex flex-wrap gap-4 items-center mt-4 md:justify-between w-full">
-            <button class="submit" type="submit">
+            <button class="scaling-btn bg-opacity-100" type="submit">
               <span class="flex items-center gap-2">
                 <MdiKeyChange />
                 {{ $t('activity.changePwd') }}
@@ -130,7 +130,7 @@ const resetError = () => {
 
   .ant-input-affix-wrapper,
   .ant-input {
-    @apply !appearance-none my-1 border-1 border-solid border-primary/50 rounded;
+    @apply !appearance-none my-1 border-1 border-solid border-primary border-opacity-50 rounded;
   }
 
   .password {
@@ -138,9 +138,5 @@ const resetError = () => {
       @apply !border-none;
     }
   }
-
-  .submit {
-    @apply ml-1 border border-gray-300 rounded-lg p-4 bg-gray-100/50 text-white bg-primary hover:(bg-primary bg-opacity-75);
-  }
 }
 </style>

packages/nc-gui/pages/signin.vue

@@ -67,7 +67,7 @@ function resetError() {
       <div
         class="bg-white mt-[60px] relative flex flex-col justify-center gap-2 w-full max-w-[500px] mx-auto p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
       >
-        <LazyGeneralNocoIcon class="color-transition hover:(ring ring-accent)" :animate="isLoading" />
+        <LazyGeneralNocoIcon class="color-transition hover:(ring ring-accent ring-opacity-100)" :animate="isLoading" />
 
         <h1 class="prose-2xl font-bold self-center my-4">{{ $t('general.signIn') }}</h1>
 
@@ -102,7 +102,7 @@ function resetError() {
           </div>
 
           <div class="self-center flex flex-col flex-wrap gap-4 items-center mt-4 justify-center">
-            <button class="submit group" type="submit">
+            <button class="scaling-btn bg-opacity-100" type="submit">
               <span class="flex items-center gap-2">
                 <MdiLogin />
                 {{ $t('general.signIn') }}
@@ -130,7 +130,7 @@ function resetError() {
 .signin {
   .ant-input-affix-wrapper,
   .ant-input {
-    @apply !appearance-none my-1 border-1 border-solid border-primary/50 rounded;
+    @apply !appearance-none my-1 border-1 border-solid border-primary border-opacity-50 rounded;
   }
 
   .password {
@@ -138,23 +138,5 @@ function resetError() {
       @apply !border-none !m-0;
     }
   }
-
-  .submit {
-    @apply z-1 relative color-transition rounded p-3 text-white shadow-sm;
-
-    &::after {
-      @apply rounded absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary;
-      content: '';
-      z-index: -1;
-    }
-
-    &:hover::after {
-      @apply transform scale-110 ring ring-accent;
-    }
-
-    &:active::after {
-      @apply ring ring-accent;
-    }
-  }
 }
 </style>

packages/nc-gui/pages/signup/[[token]].vue

@@ -85,7 +85,7 @@ function resetError() {
       <div
         class="bg-white mt-[60px] relative flex flex-col justify-center gap-2 w-full max-w-[500px] mx-auto p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
       >
-        <LazyGeneralNocoIcon class="color-transition hover:(ring ring-accent)" :animate="isLoading" />
+        <LazyGeneralNocoIcon class="color-transition hover:(ring ring-accent) hover:(ring ring-accent ring-opacity-100)" :animate="isLoading" />
 
         <h1 class="prose-2xl font-bold self-center my-4">
           {{ $t('general.signUp') }}
@@ -122,7 +122,7 @@ function resetError() {
           </a-form-item>
 
           <div class="self-center flex flex-col flex-wrap gap-4 items-center mt-4">
-            <button class="submit" type="submit">
+            <button class="scaling-btn bg-opacity-100" type="submit">
               <span class="flex items-center gap-2">
                 <MaterialSymbolsRocketLaunchOutline />
 
@@ -133,7 +133,7 @@ function resetError() {
             <a
               v-if="appInfo.googleAuthEnabled"
               :href="`${api.instance.defaults.baseURL}/auth/google`"
-              class="submit after:(!bg-white) !text-primary border-1 border-primary !no-underline"
+              class="scaling-btn bg-opacity-100 after:(!bg-white) !text-primary !no-underline"
             >
               <span class="flex items-center gap-2">
                 <LogosGoogleGmail />
@@ -146,7 +146,7 @@ function resetError() {
               <a-switch
                 v-model:checked="subscribe"
                 size="small"
-                class="my-1 hover:(ring ring-accent) focus:(!ring !ring-accent)"
+                class="my-1 hover:(ring ring-accent ring-opacity-100) focus:(!ring !ring-accent ring-opacity-100)"
               />
               <div class="prose-xs text-gray-500">Subscribe to our weekly newsletter</div>
             </div>
@@ -172,7 +172,7 @@ function resetError() {
 .signup {
   .ant-input-affix-wrapper,
   .ant-input {
-    @apply !appearance-none my-1 border-1 border-solid border-primary/50 rounded;
+    @apply !appearance-none my-1 border-1 border-solid border-primary border-opacity-50 rounded;
   }
 
   .password {
@@ -180,23 +180,5 @@ function resetError() {
       @apply !border-none !m-0;
     }
   }
-
-  .submit {
-    @apply z-1 relative color-transition rounded p-3 text-white shadow;
-
-    &::after {
-      @apply rounded absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary;
-      content: '';
-      z-index: -1;
-    }
-
-    &:hover::after {
-      @apply transform scale-110 ring ring-accent;
-    }
-
-    &:active::after {
-      @apply ring ring-accent;
-    }
-  }
 }
 </style>

packages/nc-gui/windi.config.ts

@@ -65,6 +65,10 @@ export default defineConfig({
         primary: 'rgba(var(--color-primary), var(--tw-bg-opacity))',
         accent: 'rgba(var(--color-accent), var(--tw-bg-opacity))',
       },
+      ringColor: {
+        primary: 'rgba(var(--color-primary), var(--tw-ring-opacity))',
+        accent: 'rgba(var(--color-accent), var(--tw-ring-opacity))',
+      },
       colors: {
         ...windiColors,
         ...themeColors,