Merge pull request #6235 from weseek/imprv/99923-apply-button-style

Imprv/99923 apply button style

packages/app/package.json

@@ -29,7 +29,7 @@
     "dev:migrate:down": "yarn dev:migrate-mongo down",
     "cy:run": "cypress run --browser chrome",
     "//// for CI": "",
-    "dev:ci": "yarn dev:client:nowatch && yarn dev:server --ci",
+    "dev:ci": "yarn dev --ci",
     "predev:ci": "run-p resources:*",
     "lint:typecheck": "npx -y tsc",
     "lint:eslint": "eslint --quiet \"**/*.{js,jsx,ts,tsx}\"",

packages/app/src/components/BookmarkButtons.module.scss

@@ -0,0 +1,18 @@
+@use '~/styles/bootstrap/init' as bs;
+
+.btn-bookmark {
+  :global {
+    box-shadow: none !important;
+  }
+
+  &:global {
+    @include bs.button-outline-variant(rgba(bs.$secondary, 50%), bs.$orange, rgba(lighten(bs.$orange, 20%), 0.5), rgba(lighten(bs.$orange, 20%), 0.5));
+    &:not(:disabled):not(.disabled):active,
+    &:not(:disabled):not(.disabled).active {
+      color: bs.$orange;
+    }
+    &:not(:disabled):not(.disabled):not(:hover) {
+      background-color: transparent;
+    }
+  }
+}

packages/app/src/components/BookmarkButtons.tsx

@@ -9,6 +9,8 @@ import { IUser } from '../interfaces/user';
 
 import UserPictureList from './User/UserPictureList';
 
+import styles from './BookmarkButtons.module.scss';
+
 interface Props {
   bookmarkCount?: number
   isBookmarked?: boolean
@@ -55,7 +57,7 @@ const BookmarkButtons: FC<Props> = (props: Props) => {
         type="button"
         id="bookmark-button"
         onClick={handleClick}
-        className={`btn btn-bookmark border-0
+        className={`btn ${styles['btn-bookmark']} border-0
           ${isBookmarked ? 'active' : ''} ${isGuestUser ? 'disabled' : ''}`}
       >
         <i className={`fa ${isBookmarked ? 'fa-bookmark' : 'fa-bookmark-o'}`}></i>

packages/app/src/components/LikeButtons.module.scss

@@ -0,0 +1,17 @@
+@use '~/styles/bootstrap/init' as bs;
+
+.btn-like {
+  :global {
+    box-shadow: none !important;
+  }
+  &:global {
+    @include bs.button-outline-variant(rgba(bs.$secondary, 50%), lighten(bs.$red, 15%), rgba(lighten(bs.$red, 10%), 0.15), rgba(lighten(bs.$red, 10%), 0.5));
+    &:not(:disabled):not(.disabled):active,
+    &:not(:disabled):not(.disabled).active {
+      color: lighten(bs.$red, 15%);
+    }
+    &:not(:disabled):not(.disabled):not(:hover) {
+      background-color: transparent;
+    }
+  }
+}

packages/app/src/components/LikeButtons.tsx

@@ -7,6 +7,8 @@ import { IUser } from '../interfaces/user';
 
 import UserPictureList from './User/UserPictureList';
 
+import styles from './LikeButtons.module.scss';
+
 type LikeButtonsProps = {
 
   hideTotalNumber?: boolean,
@@ -48,7 +50,7 @@ const LikeButtons: FC<LikeButtonsProps> = (props: LikeButtonsProps) => {
         type="button"
         id="like-button"
         onClick={onLikeClicked}
-        className={`btn btn-like border-0
+        className={`btn ${styles['btn-like']} border-0
             ${isLiked ? 'active' : ''} ${isGuestUser ? 'disabled' : ''}`}
       >
         <i className={`fa ${isLiked ? 'fa-heart' : 'fa-heart-o'}`}></i>

packages/app/src/components/Navbar/GrowiSubNavigation.module.scss

@@ -5,7 +5,7 @@
 // https://github.com/css-modules/css-modules/issues/295#issuecomment-404873976
 // workaround to use '&' in global scope
 .grw-subnav {
-  :grobal {
+  :global {
     min-height: var.$grw-subnav-min-height;
     padding-top: 8px;
     padding-bottom: 8px;

packages/app/src/components/Navbar/PageEditorModeManager.module.scss

@@ -2,31 +2,33 @@
 @use '~/styles/bootstrap/init' as bs;
 @use '~/styles/mixins';
 
-.grw-page-editor-mode-manager .btn {
-  width: 70px;
-  white-space: nowrap;
+.grw-page-editor-mode-manager :global {
+  .btn {
+    width: 70px;
+    white-space: nowrap;
 
-  @include mixins.border-vertical('before', 70%, 1, true);
+    @include mixins.border-vertical('before', 70%, 1, true);
 
-  &.view-button,
-  &.edit-button {
-    line-height: 1.2rem;
-    .grw-page-editor-mode-manager-icon {
-      @include bs.media-breakpoint-down(sm) {
-        font-size: 1.2rem;
+    &.view-button,
+    &.edit-button {
+      line-height: 1.2rem;
+      .grw-page-editor-mode-manager-icon {
+        @include bs.media-breakpoint-down(sm) {
+          font-size: 1.2rem;
+        }
       }
     }
-  }
-  &.hackmd-button {
-    line-height: 1.2rem;
-    .grw-page-editor-mode-manager-icon {
-      @include bs.media-breakpoint-down(sm) {
-        font-size: 1.2rem;
+    &.hackmd-button {
+      line-height: 1.2rem;
+      .grw-page-editor-mode-manager-icon {
+        @include bs.media-breakpoint-down(sm) {
+          font-size: 1.2rem;
+        }
+      }
+      .grw-page-editor-mode-manager-label {
+        font-size: 12px;
+        letter-spacing: -0.6px;
       }
-    }
-    .grw-page-editor-mode-manager-label {
-      font-size: 12px;
-      letter-spacing: -0.6px;
     }
   }
 }

packages/app/src/components/SubscribeButton.module.scss

@@ -0,0 +1,14 @@
+@use '~/styles/bootstrap/init' as bs;
+
+.btn-subscribe {
+  &:global {
+    @include bs.button-outline-variant(rgba(bs.$secondary, 50%), bs.$success, rgba(lighten(bs.$success, 10%), 0.15), rgba(lighten(bs.$success, 10%), 0.5));
+    &:not(:disabled):not(.disabled):active,
+    &:not(:disabled):not(.disabled).active {
+      color: lighten(bs.$success, 15%);
+    }
+    &:not(:disabled):not(.disabled):not(:hover) {
+      background-color: transparent;
+    }
+  }
+}

packages/app/src/components/SubscribeButton.tsx

@@ -5,6 +5,8 @@ import { UncontrolledTooltip } from 'reactstrap';
 
 import { SubscriptionStatusType } from '~/interfaces/subscription';
 
+import styles from './SubscribeButton.module.scss';
+
 
 type Props = {
   isGuestUser?: boolean,
@@ -38,7 +40,7 @@ const SubscribeButton: FC<Props> = (props: Props) => {
         type="button"
         id="subscribe-button"
         onClick={props.onClick}
-        className={`btn btn-subscribe border-0 ${buttonClass}`}
+        className={`btn ${styles['btn-subscribe']} border-0 ${buttonClass}`}
       >
         <i className={iconClass}></i>
       </button>

packages/app/src/styles/_tag.scss

@@ -1,3 +1,5 @@
+@use './bootstrap/init' as bs;
+
 .tags-page {
   .list-tag-count {
     background: rgba(0, 0, 0, 0.08);
@@ -8,7 +10,7 @@
   .grw-tag-label {
     font-size: 12px;
     font-weight: normal;
-    border-radius: $border-radius;
+    border-radius: bs.$border-radius;
   }
 }
 
@@ -18,7 +20,7 @@
   .grw-tag-label {
     font-size: 10px;
     font-weight: normal;
-    border-radius: $border-radius;
+    border-radius: bs.$border-radius;
   }
 }
 

packages/app/src/styles/atoms/_buttons.scss

@@ -1,43 +1,11 @@
-.btn.btn-like {
-  @include button-outline-variant(rgba($secondary, 50%), lighten($red, 15%), rgba(lighten($red, 10%), 0.15), rgba(lighten($red, 10%), 0.5));
-  &:not(:disabled):not(.disabled):active,
-  &:not(:disabled):not(.disabled).active {
-    color: lighten($red, 15%);
-  }
-  &:not(:disabled):not(.disabled):not(:hover) {
-    background-color: transparent;
-  }
-  box-shadow: none !important;
-}
-
-.btn.btn-bookmark {
-  @include button-outline-variant(rgba($secondary, 50%), $orange, rgba(lighten($orange, 20%), 0.5), rgba(lighten($orange, 20%), 0.5));
-  &:not(:disabled):not(.disabled):active,
-  &:not(:disabled):not(.disabled).active {
-    color: $orange;
-  }
-  &:not(:disabled):not(.disabled):not(:hover) {
-    background-color: transparent;
-  }
-  box-shadow: none !important;
-}
-
-.btn.btn-subscribe {
-  @include button-outline-variant(rgba($secondary, 50%), $success, rgba(lighten($success, 10%), 0.15), rgba(lighten($success, 10%), 0.5));
-  &:not(:disabled):not(.disabled):active,
-  &:not(:disabled):not(.disabled).active {
-    color: lighten($success, 15%);
-  }
-  &:not(:disabled):not(.disabled):not(:hover) {
-    background-color: transparent;
-  }
-}
+@use '../bootstrap/init' as bs;
+@use '../mixins';
 
 .btn.btn-seen-user {
   $color-seen-user: #549c79;
 
-  @include button-outline-variant($color-seen-user, $color-seen-user, rgba(lighten($color-seen-user, 10%), 0.15), rgba(lighten($color-seen-user, 10%), 0.5));
-  @include button-outline-svg-icon-variant($color-seen-user, $color-seen-user);
+  @include bs.button-outline-variant($color-seen-user, $color-seen-user, rgba(lighten($color-seen-user, 10%), 0.15), rgba(lighten($color-seen-user, 10%), 0.5));
+  @include mixins.button-outline-svg-icon-variant($color-seen-user, $color-seen-user);
   &:not(:disabled):not(.disabled):active,
   &:not(:disabled):not(.disabled).active {
     color: $color-seen-user;

packages/app/src/styles/style-next.scss

@@ -14,7 +14,7 @@
 @import '~material-icons/iconfont/filled';
 
 // // atoms
-// @import 'atoms/buttons';
+@import 'atoms/buttons';
 // @import 'atoms/code';
 // @import 'atoms/nav';
 // @import 'atoms/pre';
@@ -62,7 +62,7 @@
 // @import 'sidebar';
 // @import 'sidebar-wiki';
 // @import 'subnav';
-// @import 'tag';
+@import 'tag';
 // @import 'toc';
 // @import 'user';
 // @import 'staff_credit';