Change UI (major changes) Merge pull request #59 from CSE-210-Team-6/…

…mock-notes-aditya

1. the color palette has changed to match that of twitter (white and blue)
2. the support for dark theme is discontinued
3. the background colors for posts and notifications are changed
4. ensure that the content is centered while viewing the website on a small screen (mobile)
5. change the background color for the messages sent
6. fix the styles for composer and mini composer
7. refactor - break secrets.css into smaller files
8. update preferences page UI
9. navbar color changes - color is navyblue for the tab which is linked to our current page
10. the font is now helvetica
11. changing the button input style
12. changing background color and adding box shadow for settings

design/dashboard.handlebars

@@ -20,8 +20,8 @@
     {{else}}
         <div class="empty">
             <p>Follow some people to fill your feed with posts.</p>
-            <p>I suggest following me! 
-                I'm <a href="/private/feeds/[email protected]">[email protected]</a>
+            <p>We suggest following our Professor Thomas Powell! You can find him at
+                <a href="/private/feeds/[email protected]">[email protected]</a>
             </p>
         </div>
     {{/if}}

design/notifications.handlebars

@@ -4,7 +4,7 @@
     <a href="/private/notifications" id="newNotifications" class="unread" hidden></a>
 </header>
 {{#each notifications}}
-    <div class="activity">
+    <div class="activity notification-activity">
     {{#with this}}
         {{#isEq notification.type "Announce"}}
             <div class="notification">🚀 <a href="/private/feeds/{{getUsername ../actor.id}}">{{or ../actor.name ../actor.preferredUsername}}</a> boosted <a href="{{../note.id}}">your post</a> {{timesince ../time}}</div>

design/partials/composer.handlebars

@@ -18,14 +18,14 @@
         <input type="text" id="cw" placeholder="content warning"
         {{!-- {{#if prev}}value="{{{prev.summary}}}"{{/if}} --}}
         />
-        <input id="inReplyTo" placeholder="in reply to" hidden
+        <input id="inReplyTo" class='inReplyTo' placeholder="in reply to" hidden
         {{#if prev}}
         value="{{{prev.inReplyTo}}}"
         {{else}}
         value="{{inReplyTo}}"
         {{/if}}
         />
-        <input id="to" placeholder="to" hidden value="{{to}}"
+        <input id="to" class="to" placeholder="to" hidden value="{{to}}"
         {{#if prev}}
         value="{{{prev.to}}}"
         {{else}}

design/partials/minicomposer.handlebars

@@ -1,11 +1,11 @@
-<div id="composer" class="mini">
-    <form onsubmit="return app.post()">
-        <fieldset id="composer_form">
-            <input type="text" id="post" required placeholder="The coolest thing I can think of right now..." />
-            <input type="text" id="cw" placeholder="content warning" hidden />
-            <input id="inReplyTo" placeholder="in reply to" value="{{inReplyTo}}" hidden />
-            <input id="to" placeholder="to" value="{{to}}" hidden />
-            <button id="submit" type="submit">Send</button>
-        </fieldset>
-    </form>
+<div id='composer' class='mini'>
+  <form onsubmit='return app.post()'>
+    <fieldset id='composer_form'>
+      <input type='text' id='post' required placeholder='The coolest thing I can think of right now...' />
+      <input type='text' id='cw' class='mini-cw' placeholder='content warning' hidden />
+      <input id='inReplyTo' class='inReplyTo' placeholder='in reply to' value='{{inReplyTo}}' hidden />
+      <input id='to' class='to' placeholder='to' value='{{to}}' hidden />
+      <button id='submit' type='submit'>Send</button>
+    </fieldset>
+  </form>
 </div>

design/partials/note.handlebars

@@ -1,48 +1,50 @@
-        {{#unless hidebyline}}
-        {{> byline actor=actor}}
-        {{/unless}}
-        {{#if note.summary}}
-        <div class="content content_warning">
-            <span>⚠️ {{note.summary}}</span>
-            <div class="tools">
-                <a href="#" onclick='return app.toggleCW("{{note.id}}");'>Toggle</a>
-            </div>
+<div class="note-activity">
+    {{#unless hidebyline}}
+    {{> byline actor=actor}}
+    {{/unless}}
+    {{#if note.summary}}
+    <div class="content content_warning">
+        <span>⚠️ {{note.summary}}</span>
+        <div class="tools">
+            <a href="#" onclick='return app.toggleCW("{{note.id}}");'>Toggle</a>
         </div>
-        {{/if}}
-        <div class="content {{#if note.summary}}collapsed{{/if}}" id="{{note.id}}">
-            {{{note.content}}}
+    </div>
+    {{/if}}
+    <div class="content {{#if note.summary}}collapsed{{/if}}" id="{{note.id}}">
+        {{{note.content}}}
 
-            {{#if note.inReplyTo}}
-            <p><a href="{{note.inReplyTo}}" class="showThread">Show Thread</a></p>
-            {{/if}}
+        {{#if note.inReplyTo}}
+        <p><a href="{{note.inReplyTo}}" class="showThread">Show Thread</a></p>
+        {{/if}}
 
-            {{#each note.attachment}}
-                <div class="attachment">
-                    {{#isImage mediaType}}
-                    <a href="{{../url}}" target="_blank"><img src="{{../url}}" alt="{{../name}}" /></a>
-                    {{/isImage}}
-                    {{#isVideo mediaType}}
-                    <video role="application" src="{{../url}}" loop controls type="{{../mediaType}}"></video>
-                    {{/isVideo}}
-                </div>
-            {{/each}}
-            <footer>
-                <div class="tools">
-                    <button onclick='return app.replyTo("{{note.id}}","{{{getUsername actor.id}}}")'>{{@root.prefs.icons.reply}}</button>
-                    <button class="booster {{#if note.isBoosted}}active{{/if}}" onclick='return app.toggleBoost(this, "{{note.id}}")'>
-                        <span class="active">{{@root.prefs.icons.boostActive}}</span>
-                        <span class="inactive">{{@root.prefs.icons.boostInactive}}</span>
-                    </button>
-                    <button class="like {{#if note.isLiked}}active{{/if}}" onclick='return app.toggleLike(this, "{{note.id}}")'>
-                        <span class="active">{{@root.prefs.icons.faveActive}}</span>
-                        <span class="inactive">{{@root.prefs.icons.faveInactive}}</span>
-                    </button>
-                    {{#isEq note.attributedTo @root.me.id}}
-                    <button onclick='return app.editPost("{{../note.id}}")'>
-                        <span>✏️</span>
-                    </button>
-                    {{/isEq}}
-                </div>
-                <a href="{{note.url}}" class="permalink">{{timesince note.published}}</a>
-            </footer>
-        </div>
+        {{#each note.attachment}}
+            <div class="attachment">
+                {{#isImage mediaType}}
+                <a href="{{../url}}" target="_blank"><img src="{{../url}}" alt="{{../name}}" /></a>
+                {{/isImage}}
+                {{#isVideo mediaType}}
+                <video role="application" src="{{../url}}" loop controls type="{{../mediaType}}"></video>
+                {{/isVideo}}
+            </div>
+        {{/each}}
+        <footer>
+            <div class="tools">
+                <button onclick='return app.replyTo("{{note.id}}","{{{getUsername actor.id}}}")'>{{@root.prefs.icons.reply}}</button>
+                <button class="booster {{#if note.isBoosted}}active{{/if}}" onclick='return app.toggleBoost(this, "{{note.id}}")'>
+                    <span class="active">{{@root.prefs.icons.boostActive}}</span>
+                    <span class="inactive">{{@root.prefs.icons.boostInactive}}</span>
+                </button>
+                <button class="like {{#if note.isLiked}}active{{/if}}" onclick='return app.toggleLike(this, "{{note.id}}")'>
+                    <span class="active">{{@root.prefs.icons.faveActive}}</span>
+                    <span class="inactive">{{@root.prefs.icons.faveInactive}}</span>
+                </button>
+                {{#isEq note.attributedTo @root.me.id}}
+                <button onclick='return app.editPost("{{../note.id}}")'>
+                    <span>✏️</span>
+                </button>
+                {{/isEq}}
+            </div>
+            <a href="{{note.url}}" class="permalink">{{timesince note.published}}</a>
+        </footer>
+    </div>
+</div>

public/css/constants.css

@@ -0,0 +1,13 @@
+:root {
+    --background: #f9f9f9; /* Light gray background */
+    --text: #333; /* Dark text color */
+    --link: #1da1f2; /* Twitter blue */
+    --secondary: #666; /* Dimmed secondary text */
+    --tertiary: #e5e5e5; /* Light gray for tertiary elements */
+    --contrast: #555; /* Dark gray for contrast */
+    --separator: #1da1f2; /* Twitter blue for separators */
+    --header: #e0e0e0;
+    --shade: rgba(249, 249, 249, 0.25); /* Slight shade for depth */
+    --highlight: #888; /* Medium gray for highlights */
+    --accent: #e50b76; /* Pink accent */
+  }

public/css/content.css

@@ -0,0 +1,74 @@
+@import url('./constants.css');
+
+#content {
+  padding-bottom: 3rem;
+}
+
+#content.nonav {
+  padding-bottom: 0;
+}
+
+#content {
+  flex-grow: 1;
+  flex-shrink: 1;
+  overflow-y: auto;
+}
+
+.content {
+  font-size: medium;
+  padding-bottom: 2px;
+}
+.activity .content {
+  padding-left: calc(50px + 1rem);
+}
+
+.content_warning {
+  /* padding: 0.5rem 1rem; */
+  font-size: smaller;
+}
+
+.content_warning .tools {
+  flex-grow: 1;
+  text-align: right;
+  /* padding-right: 1rem; */
+}
+
+.content_warning .tools a {
+  margin: 0px auto;
+  padding: 0.25rem 1rem;
+  border-radius: 4px;
+  background: var(--shade);
+  text-decoration: none;
+}
+
+.content .tools {
+  flex-grow: 1;
+}
+.content .tools div {
+  display: inline-block;
+}
+.content .tools button {
+  font-size: 1rem;
+  background: none;
+  border: none;
+  padding: 0;
+  margin-top: 2rem;
+  margin-right: 0.5rem;
+}
+/* .content .tools button.active { background: var(--highlight); } */
+.content .tools button .active {
+  display: none;
+}
+.content .tools button.active .active {
+  display: block;
+}
+.content .tools button.active .inactive {
+  display: none;
+}
+
+
+#content {
+  padding-left: 5%;
+  padding-right: 5%;
+  padding-top: 10px;
+}