+ {@state.dialogMsg}
+
+
+
+
export default Pastebin
\ No newline at end of file
diff --git a/src/web/styles/buttons.scss b/src/web/styles/buttons.scss
new file mode 100644
index 0000000..9827218
--- /dev/null
+++ b/src/web/styles/buttons.scss
@@ -0,0 +1,34 @@
+.content-buttons {
+ margin-top: $content-radius;
+}
+
+@mixin base-button {
+ border: none;
+ outline: none;
+ color: white;
+ padding: 10px 24px;
+ text-align: center;
+ text-decoration: none;
+ display: inline-block;
+ font-size: 16px;
+ border-radius: $button-radius;
+ transition: background-color 0.2s linear;
+
+ &:active, &:hover, &::-moz-focus-inner {
+ outline: none;
+ border: none;
+ }
+
+ &:disabled, &:disabled:hover {
+ background-color: #757575;
+ }
+}
+
+.button-blue {
+ @include base-button;
+ background-color: #2196f3;
+}
+
+.button-blue:hover {
+ background-color: #64b5f6;
+}
\ No newline at end of file
diff --git a/src/web/styles/dialog.scss b/src/web/styles/dialog.scss
new file mode 100644
index 0000000..cdfb992
--- /dev/null
+++ b/src/web/styles/dialog.scss
@@ -0,0 +1,54 @@
+.ReactModal__Content_My {
+ display: flex;
+ flex-flow: column;
+ position: absolute;
+ width: $dialog-width;
+ height: $dialog-height;
+ left: calc((100vw - #{$dialog-width}) / 2);
+ top: $dialog-margin;
+ background-color: white;
+ outline: none;
+ border: none;
+ border-radius: $dialog-radius;
+ box-shadow: $shadow-large;
+ padding: $dialog-radius * 3;
+
+ p {
+ display: inline-block;
+ flex: 1;
+ box-sizing: border-box;
+ white-space: pre-wrap;
+ overflow-wrap: break-word;
+ word-wrap: break-word;
+ }
+
+ .dialog-buttons {
+ text-align: right;
+ }
+}
+
+.ReactModal__Overlay {
+ opacity: 0;
+ transition: opacity 0.5s ease-in-out;
+
+ .ReactModal__Content_My {
+ transform: translateY(-#{$dialog-height});
+ transition: transform 0.5s ease-in-out;
+ }
+}
+
+.ReactModal__Overlay--after-open {
+ opacity: 1;
+
+ .ReactModal__Content_My {
+ transform: none;
+ }
+}
+
+.ReactModal__Overlay--before-close {
+ opacity: 0;
+
+ .ReactModal__Content_My {
+ transform: translateY(-#{$dialog-height});
+ }
+}
\ No newline at end of file
diff --git a/src/web/styles/index.scss b/src/web/styles/index.scss
index 23fd5e1..b4739ae 100644
--- a/src/web/styles/index.scss
+++ b/src/web/styles/index.scss
@@ -2,6 +2,7 @@
@import './vars.scss';
// -- Styles --
@import './contentEditable.scss';
+@import './dialog.scss';
@import './home.scss';
@import './pastebin.scss';
@import './buttons.scss';
@@ -9,4 +10,25 @@
body, html {
margin: 0px;
padding: 0px;
+}
+
+a {
+ color: #00bcd4;
+}
+
+a:link {
+ text-decoration: none;
+}
+
+a:visited {
+ color: #00bcd4;
+ text-decoration: none;
+}
+
+a:hover {
+ text-decoration: underline;
+}
+
+a:active {
+ text-decoration: underline;
}
\ No newline at end of file
diff --git a/src/web/styles/vars.scss b/src/web/styles/vars.scss
index 3f43626..5679b2a 100644
--- a/src/web/styles/vars.scss
+++ b/src/web/styles/vars.scss
@@ -1,9 +1,17 @@
+// Material shadows
+//