feat: improved visuals

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

ImageBoardServerApp/Shared/Components/Comment.razor

@@ -4,8 +4,8 @@
 @using System.Text.RegularExpressions
 @using System.ComponentModel.DataAnnotations
 @inject AuthenticationStateProvider authStateProvider
-
-<div class="threadHeader">
+<div class="comment">
+    <div class="threadHeader">
     <span>[</span>
     <a class="toggleOpened" onclick="@ToggleOpened">@toggleText</a>
     <span>]</span>
@@ -84,55 +84,20 @@
         </div>
     </div>
     <div class="threadFooter">
-        <span>[</span>
-            <a @onclick="@deletePost" href="javascript:void(0)">Delete</a>
-<!--
-<button class="button-31" role="button">Button 31</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>
+        <a class="repButton" href="@reportURL" target="_blank">Report</a>
+        @if (canDel)
+        {
+            <button class="delButton" onclick="@deletePost">Delete</button>
+        }
     </div>
 }
     
+</div>
+
 
 
 @code {
+    private string reportURL { get; set; }
     
     private bool isActive { get; set; } = false;
 
@@ -187,7 +152,11 @@ opacity: .75;
         {
             canDel = true;
         }
-        canDel = false;
+        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,145 +7,129 @@
 @inject NavigationManager navigationManager;
 
 
-<div class="threadHeader">
-    @if (showOpenThread)
-    {
-        <span>[</span>
-        <a class="toggleOpened" onclick="@ToggleOpened">@toggleText</a>
-        <span>] </span>
-    }
-    <span class="title">@post.Title</span>
-    <span class="name">@post.Username </span>
-    @if (post.User.Role != "User")
-        {
-            <span class="@post.User.Role">##@post.User.Role </span>
-        }
-    <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"/>
-    }
-    @if (post.IsLocked)
-    {
-        <img src="img/static/sys/locked.png" alt="Locked"/>
-    }
-</div>
-@if (opened) 
-{
-    <div class="threadContent">
-        <div class="threadImage">
-            @if (@post.Image != null)
-            {
-                string isActiveClass = isActive ? "active" : "";
-                <img @onclick="() => isActive = !isActive" class="@isActiveClass" src="@($"{@post.Image.ImageLocation}?size=258x258")" alt="No Image found" />
-            }
-            else
-            {
-                <span>[No Image]</span>
-            }
-        </div>
-        <div class="threadTextContainer">
-            @if (showOpenThread)
-            {
-                @foreach (string s in post.Content.Split("\n").ToList().Take(6))
-                {
-                    var className = "";
-                    @if (s.StartsWith(">") && !Regex.IsMatch(s, "^>{2,}"))
-                    {
-                        className = "greenText";
-                    }
-
-                    <span class='threadText @className'>@s&nbsp;</span>
-                }
-                @if (post.Content.Split("\n").Length > 6)
-                {
-                    <br/>
-                    <span class="greenText">[Open Thread to read more...]</span>
-                }
-            }
-            else
-            {
-                @foreach (string s in post.Content.Split("\n"))
-                {
-                    var className = "";
-                    @if (s.StartsWith(">") && !Regex.IsMatch(s, "^>{2,}"))
-                    {
-                        className = "greenText";
-                    }
-
-                    <span class='threadText @className'>@s&nbsp;</span>
-                } 
-            }
-        </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>
-                }
-                else
-                {
-                    <a onclick="@stickyMe" href="javascript:void(0)">Sticky</a>
-                }
-                <span> ]</span>
-                <span>[ </span>
-                @if (post.IsLocked)
-                {
-                    <a onclick="@lockMe" href="javascript:void(0)">Unlock</a>
-                }
-                else
-                {
-                    <a onclick="@lockMe" href="javascript:void(0)">Lock</a>
-                }
-                <span> ]</span>
-            </Authorized>
-        </AuthorizeView>
-        @if (canDel)
-        {
-            <span>[</span>
-            <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>
+<div class="post">
+    <div class="threadHeader">
         @if (showOpenThread)
         {
             <span>[</span>
-            <a class="openThread" href="/@post.Board/thread/@post.PostID">(@post.Comments.Count) View Thread</a>
-            <span>]</span>
+            <a class="toggleOpened" onclick="@ToggleOpened">@toggleText</a>
+            <span>] </span>
         }
-        else
+        <span class="title">@post.Title</span>
+        <span class="name">@post.Username </span>
+        @if (post.User.Role != "User")
+            {
+                <span class="@post.User.Role">##@post.User.Role </span>
+            }
+        <span> </span>
+        <span class="date"> @getTimeFromUnix(post.CreatedAt)</span>
+        <span class="post-id">No.@post.GET</span>
+        @if (post.IsSticky)
         {
-            <span>[</span>
-            <span class="openThread">@post.Comments.Count Comments</span>
-            <span>]</span>
+            <img src="img/static/sys/sticky.png" alt="Stickied"/>
+        }
+        @if (post.IsLocked)
+        {
+            <img src="img/static/sys/locked.png" alt="Locked"/>
         }
     </div>
-}
+    @if (opened) 
+    {
+        <div class="threadContent">
+            <div class="threadImage">
+                @if (@post.Image != null)
+                {
+                    string isActiveClass = isActive ? "active" : "";
+                    <img @onclick="() => isActive = !isActive" class="@isActiveClass" src="@($"{@post.Image.ImageLocation}?size=258x258")" alt="No Image found" />
+                }
+                else
+                {
+                    <span>[No Image]</span>
+                }
+            </div>
+            <div class="threadTextContainer">
+                @if (showOpenThread)
+                {
+                    @foreach (string s in post.Content.Split("\n").ToList().Take(6))
+                    {
+                        var className = "";
+                        @if (s.StartsWith(">") && !Regex.IsMatch(s, "^>{2,}"))
+                        {
+                            className = "greenText";
+                        }
+    
+                        <span class='threadText @className'>@s&nbsp;</span>
+                    }
+                    @if (post.Content.Split("\n").Length > 6)
+                    {
+                        <br/>
+                        <span class="greenText">[Open Thread to read more...]</span>
+                    }
+                }
+                else
+                {
+                    @foreach (string s in post.Content.Split("\n"))
+                    {
+                        var className = "";
+                        @if (s.StartsWith(">") && !Regex.IsMatch(s, "^>{2,}"))
+                        {
+                            className = "greenText";
+                        }
+    
+                        <span class='threadText @className'>@s&nbsp;</span>
+                    } 
+                }
+            </div>
+        </div>
+        <div class="threadFooter">
+            <AuthorizeView Roles="Admin, Mod">
+                <Authorized>
+                    @if (post.IsSticky)
+                    {
+                        <button class="statButton" onclick="@stickyMe">Unsticky</button>
+                    }
+                    else
+                    {
+                        <button class="statButton" onclick="@stickyMe">Sticky</button>
+                    }
+                    @if (post.IsLocked)
+                    {
+                        <button class="statButton" onclick="@lockMe">Unlock</button>
+                    }
+                    else
+                    {
+                        <button class="statButton" onclick="@lockMe">Lock</button>
+                    }
+                </Authorized>
+            </AuthorizeView>
+            <a class="repButton" href="@reportURL" target="_blank">Report</a>
+            @if (canDel)
+            {
+                <button class="delButton" onclick="@deletePost">Delete</button>
+            }
+            @if (showOpenThread)
+            {
+                <a class="opButton" href="@threadURL">@openThreadName</a>
+            }
+            else
+            {
+                <span class="openThread">@post.Comments.Count Comments</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;
+}