Basic
diff --git a/web/src/components/ShareMemoImageDialog.tsx b/web/src/components/ShareMemoImageDialog.tsx
index 0474dfc2..d59824fd 100644
--- a/web/src/components/ShareMemoImageDialog.tsx
+++ b/web/src/components/ShareMemoImageDialog.tsx
@@ -75,7 +75,7 @@ const ShareMemoImageDialog: React.FC
= (props: Props) => {
🌄Share Memo
diff --git a/web/src/components/ShortcutList.tsx b/web/src/components/ShortcutList.tsx
index a89762c3..fc23ef63 100644
--- a/web/src/components/ShortcutList.tsx
+++ b/web/src/components/ShortcutList.tsx
@@ -39,7 +39,7 @@ const ShortcutList: React.FC
= () => {
Shortcuts
@@ -113,7 +113,7 @@ const ShortcutContainer: React.FC = (props: ShortcutCont
-
+
diff --git a/web/src/components/Sidebar.tsx b/web/src/components/Sidebar.tsx
index f9a236fb..b7bc3d48 100644
--- a/web/src/components/Sidebar.tsx
+++ b/web/src/components/Sidebar.tsx
@@ -27,7 +27,7 @@ const Sidebar: React.FC
= () => {
diff --git a/web/src/components/common/DatePicker.tsx b/web/src/components/common/DatePicker.tsx
index c6eb68df..6ab3d788 100644
--- a/web/src/components/common/DatePicker.tsx
+++ b/web/src/components/common/DatePicker.tsx
@@ -55,13 +55,13 @@ const DatePicker: React.FC
= (props: DatePickerProps) => {
handleChangeMonthBtnClick(-1)}>
-
+
{firstDate.getFullYear()}/{firstDate.getMonth() + 1}
handleChangeMonthBtnClick(1)}>
-
+
diff --git a/web/src/components/common/Selector.tsx b/web/src/components/common/Selector.tsx
index 7a21a2c6..c9071153 100644
--- a/web/src/components/common/Selector.tsx
+++ b/web/src/components/common/Selector.tsx
@@ -64,7 +64,7 @@ const Selector: React.FC
= (props: Props) => {
{currentItem.text}
-
+
diff --git a/web/src/less/common/date-picker.less b/web/src/less/common/date-picker.less
index 69daa1cd..17e5bfe6 100644
--- a/web/src/less/common/date-picker.less
+++ b/web/src/less/common/date-picker.less
@@ -1,33 +1,17 @@
@import "../mixin.less";
.date-picker-wrapper {
- .flex(column, flex-start, flex-start);
- padding: 16px;
+ @apply flex flex-col justify-start items-start p-4;
> .date-picker-header {
- .flex(row, center, center);
- width: 100%;
+ @apply flex flex-row justify-center items-center w-full mb-2;
> .btn-text {
- width: 24px;
- height: 24px;
- border-radius: 4px;
- cursor: pointer;
- user-select: none;
-
- > .icon-img {
- width: 100%;
- height: auto;
- }
-
- &:hover {
- background-color: @bg-whitegray;
- }
+ @apply w-6 h-6 rounded cursor-pointer select-none flex flex-col justify-center items-center opacity-40 hover:bg-gray-200;
}
> .normal-text {
- margin: 0 4px;
- line-height: 24px;
+ @apply mx-1 leading-6 font-mono;
}
}
diff --git a/web/src/less/editor.less b/web/src/less/editor.less
index 496c2971..d1ec1f4d 100644
--- a/web/src/less/editor.less
+++ b/web/src/less/editor.less
@@ -28,10 +28,10 @@
@apply flex flex-row justify-start items-center;
> .action-btn {
- @apply flex flex-row justify-start items-center p-1 w-auto h-auto mr-1 select-none rounded cursor-pointer opacity-60 hover:opacity-90 hover:bg-gray-300 hover:shadow;
+ @apply flex flex-row justify-center items-center p-1 w-auto h-auto mr-1 select-none rounded cursor-pointer opacity-60 hover:opacity-90 hover:bg-gray-300 hover:shadow;
> .icon-img {
- @apply w-5 h-auto;
+ @apply w-5 h-5 mx-auto flex flex-row justify-center items-center;
}
> .tip-text {
diff --git a/web/src/less/github-badge.less b/web/src/less/github-badge.less
index 920ab8d0..07e9fbf1 100644
--- a/web/src/less/github-badge.less
+++ b/web/src/less/github-badge.less
@@ -5,7 +5,7 @@
@apply w-auto h-full px-2 border-r rounded-l flex flex-row justify-center items-center text-xs font-bold text-gray-800 bg-gray-100;
> .icon-img {
- @apply w-4 h-auto mr-1;
+ @apply mr-1;
}
}
diff --git a/web/src/less/memo.less b/web/src/less/memo.less
index ccb87879..bc5776a3 100644
--- a/web/src/less/memo.less
+++ b/web/src/less/memo.less
@@ -73,18 +73,16 @@
}
.btn {
- @apply flex flex-row justify-center items-center px-2 leading-6 text-sm rounded hover:bg-gray-100;
+ @apply flex flex-row justify-center items-center px-2 leading-6 text-sm rounded hover:bg-gray-200;
&.more-action-btn {
- @apply w-8 -mr-2 opacity-60 cursor-default;
+ @apply w-8 -mr-2 opacity-60 cursor-default hover:bg-transparent;
> .icon-img {
@apply w-4 h-auto;
}
&:hover {
- background-color: unset;
-
& + .more-action-btns-wrapper {
display: flex;
}
@@ -130,7 +128,7 @@
}
> .icon-img {
- @apply w-4 h-auto transition-all;
+ @apply w-4 h-auto ml-1 transition-all;
}
}
}
diff --git a/web/src/less/search-bar.less b/web/src/less/search-bar.less
index d016a508..1953e823 100644
--- a/web/src/less/search-bar.less
+++ b/web/src/less/search-bar.less
@@ -8,7 +8,7 @@
@apply w-full py-2 px-4 rounded-lg flex flex-row justify-start items-center bg-zinc-200;
> .icon-img {
- @apply mr-2 w-4 h-auto opacity-80;
+ @apply mr-2 h-auto opacity-30;
}
> .text-input {
diff --git a/web/src/less/shortcut-list.less b/web/src/less/shortcut-list.less
index 190d86f2..a107b358 100644
--- a/web/src/less/shortcut-list.less
+++ b/web/src/less/shortcut-list.less
@@ -12,10 +12,10 @@
}
> .btn {
- @apply flex flex-col justify-center items-center w-5 h-5 bg-gray-200 rounded ml-2 shadow hover:opacity-80;
+ @apply flex flex-col justify-center items-center w-5 p-1 h-5 bg-gray-200 rounded ml-2 shadow hover:opacity-80;
- > img {
- @apply w-4 h-4 opacity-80;
+ > .icon-img {
+ @apply opacity-60;
}
}
}
@@ -66,14 +66,11 @@
@apply flex-row justify-end items-center hidden shrink-0;
> .action-btn {
- .flex(row, center, center);
- @apply w-6 h-6 shrink-0;
-
- > .icon-img {
- @apply w-4 h-auto;
- }
+ @apply flex flex-row justify-center items-center w-6 h-6 shrink-0;
&.toggle-btn {
+ @apply opacity-60;
+
&:hover {
& + .action-btns-wrapper {
@apply flex;