From 15ba59b5b4ab8159736bf1b8ecef5b4ddc84fb3a Mon Sep 17 00:00:00 2001
From: Son Nguyen Hoang <hoangson091104@gmail.com>
Date: Tue, 12 Mar 2024 19:15:18 -0400
Subject: [PATCH] Fix: Updated scss (#82)

---
 .idea/watcherTasks.xml             | 25 +++++++++
 MovieVerse-Frontend/css/index.scss | 88 ++++++++++++++++++++++++++++++
 2 files changed, 113 insertions(+)
 create mode 100644 .idea/watcherTasks.xml
 create mode 100644 MovieVerse-Frontend/css/index.scss

diff --git a/.idea/watcherTasks.xml b/.idea/watcherTasks.xml
new file mode 100644
index 00000000..c70980f4
--- /dev/null
+++ b/.idea/watcherTasks.xml
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectTasksOptions">
+    <TaskOptions isEnabled="true">
+      <option name="arguments" value="$FileName$:$FileNameWithoutExtension$.css" />
+      <option name="checkSyntaxErrors" value="true" />
+      <option name="description" />
+      <option name="exitCodeBehavior" value="ERROR" />
+      <option name="fileExtension" value="scss" />
+      <option name="immediateSync" value="true" />
+      <option name="name" value="SCSS" />
+      <option name="output" value="$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map" />
+      <option name="outputFilters">
+        <array />
+      </option>
+      <option name="outputFromStdout" value="false" />
+      <option name="program" value="sass" />
+      <option name="runOnExternalChanges" value="true" />
+      <option name="scopeName" value="Project Files" />
+      <option name="trackOnlyRoot" value="true" />
+      <option name="workingDir" value="$FileDir$" />
+      <envs />
+    </TaskOptions>
+  </component>
+</project>
\ No newline at end of file
diff --git a/MovieVerse-Frontend/css/index.scss b/MovieVerse-Frontend/css/index.scss
new file mode 100644
index 00000000..5e077b64
--- /dev/null
+++ b/MovieVerse-Frontend/css/index.scss
@@ -0,0 +1,88 @@
+$font-family-poppins: "Poppins", sans-serif;
+$background-color-primary: #7378c5;
+$hover-color: #ff8623;
+$link-color: white;
+$link-hover-color: #f509d9;
+
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap');
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background: url("../../images/universe-1.png") no-repeat center center fixed;
+  background-size: cover;
+  font-family: $font-family-poppins;
+  margin: 0;
+  align-content: center;
+  overflow-x: hidden;
+  min-height: 100vh;
+  overflow-y: auto;
+}
+
+%button-style {
+  background-color: $background-color-primary;
+  color: black;
+  border-radius: 8px;
+  border: none;
+  cursor: pointer;
+  font: inherit;
+  &:hover {
+    background-color: $hover-color;
+    transition: 0.3s ease-in;
+  }
+}
+
+#movie-match-btn {
+  @extend %button-style;
+  position: fixed;
+  bottom: 220px;
+  right: 20px;
+}
+
+#submit-comment {
+  @extend %button-style;
+  padding: 10px 15px;
+}
+
+// Link styles
+%link-style {
+  color: $link-color;
+  text-decoration: underline;
+  &:hover {
+    color: $link-hover-color;
+  }
+}
+
+#cast-info, #similar-tv, #director-link {
+  @extend %link-style;
+}
+
+@mixin modal-style {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 10px;
+  margin-top: 5px;
+}
+
+.modal-header {
+  @include modal-style;
+}
+
+.comments-controls {
+  display: flex;
+  align-items: center;
+  button:disabled {
+    cursor: not-allowed;
+  }
+  &.justify-start {
+    justify-content: start;
+  }
+  &.justify-center {
+    justify-content: center;
+    gap: 10px;
+    width: 100%;
+  }
+}