Merge pull request #103 from AstarNetwork/feat/bigger-modal-drawer

feat: makes modal drawer wider

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "printWidth": 100,
+  "singleQuote": true,
+  "semi": true,
+  "tabWidth": 2
+}

packages/Modals/index.ts

@@ -2,19 +2,16 @@ import { App, Plugin } from 'vue';
 import SimpleModal from './src/SimpleModal.vue';
 import ModalDrawer from './src/ModalDrawer.vue';
 import DefaultModal from './src/DefaultModal.vue';
-import { fadeDuration } from './src/index'
+import { fadeDuration } from './src/index';
+import IconBackWithColor from './src/IconBackWithColor.vue';
 
 export const ModalsPlugin: Plugin = {
   install(app: App) {
     app.component('astar-simple-modal', SimpleModal);
     app.component('astar-modal-drawer', ModalDrawer);
     app.component('astar-default-modal', DefaultModal);
+    app.component('astar-icon-back-with-color', IconBackWithColor);
   },
 };
 
-export {
-  SimpleModal,
-  ModalDrawer,
-  DefaultModal,
-  fadeDuration
-};
+export { SimpleModal, ModalDrawer, DefaultModal, fadeDuration, IconBackWithColor };

packages/Modals/src/ModalDrawer.vue

@@ -103,12 +103,19 @@ export default defineComponent({
   z-index: 10;
   top: 104px;
   right: 0px;
-  width: 544px;
+  width: 100%;
   height: calc(100% - 104px);
   text-align: center;
   background: rgba(255, 255, 255, 0.5);
   box-shadow: -1px 0px 3px rgba(0, 0, 0, 0.1);
+  @media (min-width: $xs) {
+    width: 375px;
+  }
+  @media (min-width: $sm) {
+    width: 544px;
+  }
   @media (min-width: $lg) {
+    width: 928px;
     top: 96px;
     height: calc(100% - 96px);
   }
@@ -120,19 +127,15 @@ export default defineComponent({
 .modal-content {
   background-color: $gray-1;
   border: 0px solid transparent;
-  padding: 24px 30px;
+  padding: 32px 8px;
   width: 100% !important;
   height: 100%;
   overflow-y: auto;
   box-shadow: -2px 10px 10px 0px #9999;
   background: white;
 
-  @media (min-width: $xs) {
-    width: 375px;
-  }
   @media (min-width: $sm) {
-    width: 544px;
-    padding: 46px 40px !important;
+    padding: 24px 30px;
   }
 }
 

packages/export_type.ts

@@ -1,14 +1,5 @@
-import {
-  Button,
-  IrregularButton,
-  RadioBtn,
-  SmallButton,
-  TextButton,
-} from './Buttons';
-import {
-  ConnectionIndicator,
-  Header 
-} from './Header';
+import { Button, IrregularButton, RadioBtn, SmallButton, TextButton } from './Buttons';
+import { ConnectionIndicator, Header } from './Header';
 import {
   Icon3dots,
   IconAccountSample,
@@ -63,17 +54,9 @@ import {
   IconWallet,
   IconYoutube,
 } from './Icons';
-import {
-  DefaultModal,
-  ModalDrawer,
-  SimpleModal
-} from './Modals';
-import {
-  Spinner
-} from './Spinner';
-import {
-  Text
-} from './Text';
+import { DefaultModal, ModalDrawer, SimpleModal, IconBackWithColor } from './Modals';
+import { Spinner } from './Spinner';
+import { Text } from './Text';
 
 export interface GlobalComponents {
   'astar-button': typeof Button;
@@ -139,5 +122,6 @@ export interface GlobalComponents {
   'astar-modal-drawer': typeof ModalDrawer;
   'astar-simple-modal': typeof SimpleModal;
   'astar-spinner': typeof Spinner;
-  'astar-text': typeof Text;      
+  'astar-text': typeof Text;
+  'astar-icon-back-with-color': typeof IconBackWithColor;
 }

packages/index.ts

@@ -22,11 +22,11 @@ const AstarUIPlugin: Plugin = {
 
 export default AstarUIPlugin;
 
-export * from './Text'
-export * from './Spinner'
-export * from './Modals'
-export * from './Header'
-export * from './Buttons'
-export * from './Icons'
+export * from './Text';
+export * from './Spinner';
+export * from './Modals';
+export * from './Header';
+export * from './Buttons';
+export * from './Icons';
 
-export * from './export_type'
+export * from './export_type';

src/stories/Icons/IconBackWithColor.stories.js

@@ -0,0 +1,11 @@
+import IconBackWithColor from "packages/Modals/src/IconBackWithColor.vue";
+
+export default {
+  title: 'Icons/IconBackWithColor',
+  component: IconBackWithColor
+};
+
+export const DefaultIcon = () => ({
+  components: { IconBackWithColor },
+  template: '<IconBackWithColor />',
+});