Design stuff shit

frontend-reactive/app/styles/app.css

@@ -1,6 +1,8 @@
 /* Ember supports plain CSS out of the box. More info: https://cli.emberjs.com/release/advanced-use/stylesheets/ */
 @import url("notes.css");
+@import url("util.css");
 
+/* TODO: Find a cool font to use throughout the entire project */
 * {
   font-family:
     system-ui,
@@ -15,3 +17,4 @@
     "Helvetica Neue",
     sans-serif;
 }
+

frontend-reactive/app/styles/notes.css

@@ -5,7 +5,7 @@
   height: fit-content;
 
   /* align-items: center; */
-  border: 1px dashed green;
+  border: 1px dashed red;
   max-width: 50em;
   padding: 0.5em;
   background-color: #eee;
@@ -75,7 +75,7 @@
 .note-content-toggle {
   margin-top: 0.3em;
   margin-bottom: 0.3em;
-  cursor: default;
+  cursor: pointer;
   background-color: #ccc;
   padding: 0.1em 0.3em 0.2em;
   border-radius: 8px;
@@ -85,3 +85,46 @@
 .note-content-toggle:hover {
   background-color: #aaa;
 }
+
+.note-interactions-wrapper {
+  display: flex;
+  flex-direction: row;
+}
+
+.note-interactions-interaction-button {
+  display: flex;
+  flex-direction: row;
+  padding-right: 1em;
+  align-items: center;
+  border: 1px solid #aaa;
+  padding: 0.3em;
+  border-radius: 8px;
+  margin-right: 0.5em;
+  margin-top: 0.2em;
+  cursor: pointer;
+}
+
+.note-interactions-interaction-icon {
+  height: 2.5ex;
+  padding-right: 0.2em;
+  width: 100%;
+}
+
+.note-interactions-interaction-counter {
+  font-weight: bolder;
+  margin-top: -0.08em;
+  margin-bottom: -0.08em;
+}
+
+.note-interactions-interactions-button-like {
+  display: flex;
+  flex-direction: row;
+}
+
+.note-interactions-interactions-button-custom {
+  border-left: 1px black solid;
+  margin-left: 0.3em;
+  padding-left: 0.3em;
+  padding-top: 0.2em;
+  margin-bottom: -0.1em;
+}

frontend-reactive/app/styles/util.css

@@ -0,0 +1,22 @@
+.hide {
+  display: none;
+}
+
+/* Copied from: https://stackoverflow.com/a/4407335 */
+.noselect {
+  -webkit-touch-callout: none; /* iOS Safari */
+  -webkit-user-select: none; /* Safari */
+  -khtml-user-select: none; /* Konqueror HTML */
+  -moz-user-select: none; /* Old versions of Firefox */
+  -ms-user-select: none; /* Internet Explorer/Edge */
+  user-select: none; /* Non-prefixed version, currently
+                                  supported by Chrome, Edge, Opera and Firefox */
+}
+
+.separator-horizontal {
+  width: 100%;
+  border: 1px solid black;
+  margin-top: 0.2em;
+  margin-bottom: 0.2em;
+}
+