Add profile modal

src/button/Button.jsx

@@ -14,6 +14,7 @@ const variantToClassName = {
   default: [styles.button],
   toolbar: [styles.toolbarButton],
   icon: [styles.iconButton],
+  secondary: [styles.secondary],
   copy: [styles.copyButton],
   iconCopy: [styles.iconCopyButton],
 };

src/button/Button.module.css

@@ -17,7 +17,9 @@ limitations under the License.
 .button,
 .toolbarButton,
 .iconButton,
-.iconCopyButton {
+.iconCopyButton,
+.secondary,
+.copyButton {
   position: relative;
   display: flex;
   justify-content: center;
@@ -28,15 +30,20 @@ limitations under the License.
   cursor: pointer;
 }
 
-.button {
-  color: #fff;
-  background-color: var(--primaryColor);
+.secondary,
+.button,
+.copyButton {
   padding: 7px 15px;
   border-radius: 8px;
   font-size: 14px;
   font-weight: 700;
 }
 
+.button {
+  color: #fff;
+  background-color: var(--primaryColor);
+}
+
 .toolbarButton {
   width: 50px;
   height: 50px;
@@ -111,21 +118,17 @@ limitations under the License.
   top: calc(100% + 6px);
 }
 
+.secondary,
 .copyButton {
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: transparent;
-  cursor: pointer;
-  border: 2px solid #0dbd8b;
-  border-radius: 8px;
   color: #0dbd8b;
+  border: 2px solid #0dbd8b;
+  background-color: transparent;
+}
+
+.copyButton {
   width: 100%;
   height: 40px;
   transition: border-color 250ms, background-color 250ms;
-  padding: 0 20px;
-  flex-shrink: 0;
 }
 
 .copyButton span {