feat: improved visuals

Signed-off-by: limited_dev <loginakkisativ@gmail.com>

ImageBoardServerApp/Shared/Components/Comment.razor

@@ -4,7 +4,7 @@
 @using System.Text.RegularExpressions
 @using System.ComponentModel.DataAnnotations
 @inject AuthenticationStateProvider authStateProvider
-
+<div class="comment">
     <div class="threadHeader">
     <span>[</span>
     <a class="toggleOpened" onclick="@ToggleOpened">@toggleText</a>
@@ -84,55 +84,20 @@
         </div>
     </div>
     <div class="threadFooter">
-        <span>[</span>
+        <a class="repButton" href="@reportURL" target="_blank">Report</a>
-            <a @onclick="@deletePost" href="javascript:void(0)">Delete</a>
+        @if (canDel)
-<!--
+        {
-<button class="button-31" role="button">Button 31</button>
+            <button class="delButton" onclick="@deletePost">Delete</button>
-            
-/* CSS */
-.button-31 {
-background-color: #222;
-border-radius: 4px;
-border-style: none;
-box-sizing: border-box;
-color: #fff;
-cursor: pointer;
-display: inline-block;
-font-family: "Farfetch Basis","Helvetica Neue",Arial,sans-serif;
-font-size: 16px;
-font-weight: 700;
-line-height: 1.5;
-margin: 0;
-max-width: none;
-min-height: 44px;
-min-width: 10px;
-outline: none;
-overflow: hidden;
-padding: 9px 20px 8px;
-position: relative;
-text-align: center;
-text-transform: none;
-user-select: none;
--webkit-user-select: none;
-touch-action: manipulation;
-width: 100%;
         }
-            
-.button-31:hover,
-.button-31:focus {
-opacity: .75;
-}
-!-->
-        <span>]</span>
-        <span>[</span>
-        <a class="report" href="/sys/report/comment/@comment.Board/@comment.CommentID" target="_blank">Report</a>
-        <span>]</span>
     </div>
 }
     
+</div>
+
 
 
 @code {
+    private string reportURL { get; set; }
     
     private bool isActive { get; set; } = false;
 
@@ -187,7 +152,11 @@ opacity: .75;
         {
             canDel = true;
         }
+        else
+        {
             canDel = false;
+        }
+
         
         hoverComment = new Dictionary<int, CommentData>();
         hoverPost = new Dictionary<int, PostData>();
@@ -223,6 +192,7 @@ opacity: .75;
                 }
             }
         }
+        reportURL = $"/sys/report/comment/{comment.Board}/{comment.CommentID}";
     }
 
     protected override async Task OnInitializedAsync()

ImageBoardServerApp/Shared/Components/Comment.razor.css

@@ -27,6 +27,9 @@
 
 .threadHeader{
     text-align: left;
+    background-color: #241938;
+    border-bottom: 2px solid #2d2a42;
+    margin-inside: 2px;
 }
 
 .threadFooter{
@@ -48,6 +51,8 @@
     max-width: 500px;
     max-height: 500px;
     padding: 5px;
+    border:  1px solid #2d2a42;
+    border-radius: 5px;
 }
 
 .threadImage img{
@@ -77,3 +82,58 @@
 .Mod{
     color: #bd93f9;
 }
+
+.comment{
+    border: 2px solid #2d2a42;
+    border-radius: 4px;
+}
+
+.threadFooter button{
+    border: none;
+    color: white;
+    padding: 4px 8px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin: 4px 2px;
+    transition-duration: 0.4s;
+    cursor: pointer;
+    border-radius: 3px;
+}
+
+.threadFooter a{
+    border: none;
+    color: white;
+    padding: 4px 8px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin: 4px 2px;
+    transition-duration: 0.4s;
+    cursor: pointer;
+    border-radius: 3px;
+}
+
+.delButton{
+    background-color: #433F6B;
+    color: white;
+    border: 2px solid #ff5555;
+}
+
+.delButton:hover{
+    background-color: #ff5555;
+    color: white;
+}
+
+.repButton{
+    background-color: #433F6B;
+    color: white;
+    border: 2px solid #ffa255;
+}
+
+.repButton:hover{
+    background-color: #ffa255;
+    color: white;
+}

ImageBoardServerApp/Shared/Components/Forms/CommentForm.razor

@@ -5,9 +5,9 @@
 @inject IWebHostEnvironment env
 @inject AuthenticationStateProvider authStateProvider
 
-<div>
+<div class="toggler">
     <span>[</span>
-    <a class="toggleOpened" onclick="@ToggleOpened">@toggleText</a>
+    <button onclick="@ToggleOpened">@toggleText</button>
     <span>]</span>
 </div>
 @if (opened)

ImageBoardServerApp/Shared/Components/Forms/CommentForm.razor.css

@@ -42,3 +42,23 @@
 .postError{
     color: #ff191c;
 }
+
+.toggler button{
+    color: white;
+    padding: 4px 8px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin: 4px 2px;
+    transition-duration: 0.4s;
+    cursor: pointer;
+    border-radius: 3px;
+    background-color: #433F6B;
+    border: none;
+}
+
+.toggler button:hover{
+    background-color: #0de873;
+    color: black; 
+}

ImageBoardServerApp/Shared/Components/Forms/PostForm.razor

@@ -6,9 +6,9 @@
 @inject IWebHostEnvironment env
 @inject AuthenticationStateProvider authStateProvider
 
-<div>
+<div class="toggler">
     <span>[</span>
-    <a class="toggleOpened" onclick="@ToggleOpened">@toggleText</a>
+    <button onclick="@ToggleOpened">@toggleText</button>
     <span>]</span>
 </div>
 @if (opened)

ImageBoardServerApp/Shared/Components/Forms/PostForm.razor.css

@@ -42,3 +42,23 @@
 .postError{
     color: #ff191c;
 }
+
+.toggler button{
+    color: white;
+    padding: 4px 8px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin: 4px 2px;
+    transition-duration: 0.4s;
+    cursor: pointer;
+    border-radius: 3px;
+    background-color: #433F6B;
+    border: none;
+}
+
+.toggler button:hover{
+    background-color: #0de873;
+    color: black;
+}

ImageBoardServerApp/Shared/Components/Post.razor

@@ -7,6 +7,7 @@
 @inject NavigationManager navigationManager;
 
 
+<div class="post">
     <div class="threadHeader">
         @if (showOpenThread)
         {
@@ -23,12 +24,6 @@
         <span> </span>
         <span class="date"> @getTimeFromUnix(post.CreatedAt)</span>
         <span class="post-id">No.@post.GET</span>
-    <AuthorizeView Roles="Admin,Mod">
-        <Authorized>
-            <span> </span>
-            <span>(@value)</span>
-        </Authorized>
-    </AuthorizeView>
         @if (post.IsSticky)
         {
             <img src="img/static/sys/sticky.png" alt="Stickied"/>
@@ -87,65 +82,54 @@
             </div>
         </div>
         <div class="threadFooter">
-        <div class="sticky">
-                
-        </div>
             <AuthorizeView Roles="Admin, Mod">
                 <Authorized>
-                <span>[ </span>
                     @if (post.IsSticky)
                     {
-                    <a onclick="@stickyMe" href="javascript:void(0)">Unsticky</a>
+                        <button class="statButton" onclick="@stickyMe">Unsticky</button>
                     }
                     else
                     {
-                    <a onclick="@stickyMe" href="javascript:void(0)">Sticky</a>
+                        <button class="statButton" onclick="@stickyMe">Sticky</button>
                     }
-                <span> ]</span>
-                <span>[ </span>
                     @if (post.IsLocked)
                     {
-                    <a onclick="@lockMe" href="javascript:void(0)">Unlock</a>
+                        <button class="statButton" onclick="@lockMe">Unlock</button>
                     }
                     else
                     {
-                    <a onclick="@lockMe" href="javascript:void(0)">Lock</a>
+                        <button class="statButton" onclick="@lockMe">Lock</button>
                     }
-                <span> ]</span>
                 </Authorized>
             </AuthorizeView>
+            <a class="repButton" href="@reportURL" target="_blank">Report</a>
             @if (canDel)
             {
-            <span>[</span>
+                <button class="delButton" onclick="@deletePost">Delete</button>
-            <a @onclick="@deletePost" href="javascript:void(0)">Delete</a>
-            <span>]</span>
             }
-        <span>[</span>
-        <a class="report" href="/sys/report/op/@post.Board/@post.PostID" target="_blank">Report</a>
-        <span>] </span>
             @if (showOpenThread)
             {
-            <span>[</span>
+                <a class="opButton" href="@threadURL">@openThreadName</a>
-            <a class="openThread" href="/@post.Board/thread/@post.PostID">(@post.Comments.Count) View Thread</a>
-            <span>]</span>
             }
             else
             {
-            <span>[</span>
                 <span class="openThread">@post.Comments.Count Comments</span>
-            <span>]</span>
             }
         </div>
     }
+</div>
 
 @code {
 
+    private string reportURL { get; set; }
+    private string threadURL { get; set; }
+    private string openThreadName { get; set; }
+
     public bool canDel { get; set; }
     public bool isActive { get; set; } = false;
 
     private int linecnt = 0;
     
-    
     private async void lockMe()
     {
         post.IsLocked = !post.IsLocked;
@@ -202,6 +186,11 @@
         var user = await cauthStateProvder.GetAuthenticationStateAsync();
         var usr = user.User;
         UserData foundusr = await UsersRepository.getUserByEmailAsync(usr.Identity.Name);
+
+        reportURL = $"/sys/report/op/{post.Board}/{post.PostID}";
+        threadURL = $"/{post.Board}/thread/{post.PostID}";
+        openThreadName = $"({post.Comments.Count}) View Thread";
+        
         if (foundusr != null && (foundusr.Role != "User" || post.UserID == foundusr.UserID))
         {
             canDel = true;

ImageBoardServerApp/Shared/Components/Post.razor.css

@@ -23,9 +23,11 @@
 .Mod{
     color: #bd93f9;
 }
-
 .threadHeader{
     text-align: left;
+    background-color: #241938;
+    border-bottom: 2px solid #2d2a42;
+    margin-inside: 2px;
 }
 
 .threadFooter{
@@ -33,6 +35,78 @@
     align-self: end; !important;
 }
 
+.threadFooter button{
+    border: none;
+    color: white;
+    padding: 4px 8px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin: 4px 2px;
+    transition-duration: 0.4s;
+    cursor: pointer;
+    border-radius: 3px;
+}
+
+.threadFooter a{
+    border: none;
+    color: white;
+    padding: 4px 8px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin: 4px 2px;
+    transition-duration: 0.4s;
+    cursor: pointer;
+    border-radius: 3px;
+}
+
+.delButton{
+    background-color: #433F6B;
+    color: white;
+    border: 2px solid #ff5555;
+}
+
+.delButton:hover{
+    background-color: #ff5555;
+    color: white;
+}
+
+.repButton{
+    background-color: #433F6B;
+    color: white;
+    border: 2px solid #ffa255; 
+}
+
+.repButton:hover{
+    background-color: #ffa255;
+    color: white; 
+}
+
+.opButton{
+    background-color: #433F6B;
+    color: white;
+    border: 2px solid #55ff77;
+}
+
+.opButton:hover{
+    background-color: #55ff77;
+    color: white;
+}
+
+.statButton{
+    background-color: #433F6B;
+    color: white;
+    border: 2px solid #008CBA; 
+}
+
+.statButton:hover{
+    background-color: #008CBA;
+    color: white;
+}
+
 .threadFooter.a{
     color: #6272a4;
 }
@@ -75,3 +149,13 @@
 .threadMsg {
     display: inline-block;
 }
+
+.post{
+    border: 2px solid #2d2a42;
+    border-radius: 4px;
+}
+
+.threadImage{
+    border:  1px solid #2d2a42;
+    border-radius: 5px;
+}