css changes

SecureSharing/Views/Home/Index.cshtml

@@ -6,40 +6,48 @@
 
 <h1>Share files</h1>
 <form method="post" enctype="multipart/form-data" asp-controller="Home" asp-action="CreateMessage" class="share-files-form">
-    <label class="label-text">Sharing link avaliability</label>
-    <div class="button-box col-lg-12">
-        <div class="single-button-input">
-            <input id="OneTime" checked="checked" class="radio-input" type="radio" asp-for="ChosenPeriod" value="@PeriodOfValidity.ONE_TIME">
-            <label for="OneTime" class="label-available"><span style="color:#FFA463">One</span> Time</label>
-        </div>
-        <div class="single-button-input">
-            <input id="OneHour" class="radio-input" type="radio" asp-for="ChosenPeriod" value="@PeriodOfValidity.ONE_HOUR"/> <label for="OneHour" class="label-available">1 <span style="color:#B9CFE4;">hour</span></label>
-        </div>
-        <div class="single-button-input">
-            <input id="OneDay" class="radio-input" type="radio" asp-for="ChosenPeriod" value="@PeriodOfValidity.ONE_DAY"/> <label for="OneDay" class="label-available">1 <span style="color:#B9CFE4;">day</span></label>
-        </div>
-        <div class="single-button-input">
-            <input id="SevenDays" class="radio-input" type="radio" asp-for="ChosenPeriod" value="@PeriodOfValidity.ONE_WEEK"/> <label for="SevenDays" class="label-available">7 <span style="color:#B9CFE4;">days</span></label>
+    <div class="mb-3">
+        <label class="label-text">Sharing link avaliability</label>
+        <div class="button-box row">
+            <div class="single-button-input col-4">
+                <input id="OneTime" checked="checked" class="radio-input" type="radio" asp-for="ChosenPeriod" value="@PeriodOfValidity.ONE_TIME">
+                <label for="OneTime" class="label-available"><span style="color:#FFA463">One</span> Time</label>
+            </div>
+            <div class="single-button-input d-none">
+                <input id="OneHour" class="radio-input" type="radio" asp-for="ChosenPeriod" value="@PeriodOfValidity.ONE_HOUR"/> <label for="OneHour" class="label-available">1 hour</label>
+            </div>
+            <div class="single-button-input col-4">
+                <input id="OneDay" class="radio-input" type="radio" asp-for="ChosenPeriod" value="@PeriodOfValidity.ONE_DAY"/> <label for="OneDay" class="label-available">1 day</label>
+            </div>
+            <div class="single-button-input col-4">
+                <input id="SevenDays" class="radio-input" type="radio" asp-for="ChosenPeriod" value="@PeriodOfValidity.ONE_WEEK"/> <label for="SevenDays" class="label-available">7 days</label>
+            </div>
         </div>
     </div>
-    <label class="label-text">Message (optional)</label>
-    <textarea asp-for="Text" class="input-message"></textarea>
-    <label class="label-text">Upload files</label>
-    <div id="dropContainer" class="drop-here">
-        <img class="image-file-upload" src="~/img/file-upload-image.png" alt=""/>
-        <div class="default-text text-files-upload">
-            <label for="fileInput" class="btn browse-button">
-                <span style="color:#0D1C52">Drag and drop files here or</span> browse
-            </label>
-            <input asp-for="Files" id="fileInput" type="file" multiple style="display: none"/>
-            <input asp-for="FilesAsText" id="fileInputAsText" type="text" style="display:none" value="978682e8-3ce7-4258-b731-d027b5b213aa"/>
+    <div class="mb-3">
+        <label class="label-text">Message (optional)</label>
+        <textarea asp-for="Text" class="input-message"></textarea>
+    </div>
+    <div class="mb-3">
+        <label class="label-text">Upload files</label>
+        <div id="dropContainer" class="drop-here">
+            <img class="image-file-upload" src="~/img/file-upload-image.png" alt=""/>
+            <div class="default-text text-files-upload">
+                <label for="fileInput" class="btn browse-button">
+                    <span style="color:#0D1C52">Drag and drop files here or</span> browse
+                </label>
+                <input asp-for="Files" id="fileInput" type="file" multiple style="display: none"/>
+                <input asp-for="FilesAsText" id="fileInputAsText" type="text" style="display:none" value="978682e8-3ce7-4258-b731-d027b5b213aa"/>
+            </div>
         </div>
     </div>
 
-    <div class="label-text">
-        Your files
-    </div>
-    <div id="filesUploaded">
+    <div class="mb-3">
+        <div class="label-text">
+            Your files
+        </div>
+        <div id="filesUploaded">
+        </div>
     </div>
 
     <button class=" btn btn-light share-button" type="submit">Share</button>

SecureSharing/wwwroot/css/site.css

@@ -44,7 +44,7 @@
     border-color: rgb(255, 0, 0);
 }
 
-body{
+body {
     background: url('../img/gradient.png') no-repeat center center fixed;
     -webkit-background-size: cover;
     -moz-background-size: cover;
@@ -52,6 +52,12 @@ body{
     background-size: cover;
     size: 16px;
     font-weight: bold;
+    min-height: 100vh;
+    height: fit-content;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .image-logo {
@@ -70,11 +76,8 @@ body{
     padding: 32px;
     gap: 24px;
 
-    position: absolute;
-    width: 600px;
-    height: 800px;
-    left: calc(50vw - 300px);
-    top: calc(50vh - 400px);
+    max-width: 600px;
+    height: fit-content;
     overflow-y: auto;
     scrollbar-width: thin;
     scrollbar-color: #ddd;
@@ -82,18 +85,31 @@ body{
     color: #0D1C52;
     box-shadow: none;
     border-radius: 32px;
+    margin: 1.3rem;
 }
+
 .modal::-webkit-scrollbar {
     width: 5px;
 }
+
 .modal::-webkit-scrollbar-track {
     background: #ddd;
 
 }
+
 .modal::-webkit-scrollbar-thumb {
     background: #777;
 }
 
+.modal-content {
+    border-radius: 18px;
+}
+
+.image-logo {
+    margin-bottom: 2rem;
+}
+
+
 .share-files {
     text-align: left !important;
     align-items: initial;
@@ -101,22 +117,29 @@ body{
     width: 100%;
 }
 
+h1 {
+    text-align: center;
+    font-size: 2rem;
+    margin-bottom: 2rem;
+}
+
 .share-files-form {
     color: #0D1C52;
     width: 100%;
 }
+
 .button-box {
-    text-align:center;
-    margin-top:10px;
+    text-align: center;
+    margin-top: 10px;
     margin-bottom: 0;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    gap: 8px;
     padding: 0;
 }
+
 .single-button-input {
-    flex: 1;
+    
 }
 
 .radio-input {
@@ -129,16 +152,18 @@ body{
     border: 1px solid #0D1C52;
     border-radius: 5px;
     width: 100%;
-    height: 55px;
-    padding-top: 15px;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    height: fit-content;
 }
 
 .label-text {
-    font-size: 23px;
+    font-size: 1.3rem;
     padding-left: 4px;
 }
 
-.label-text-lower{
+.label-text-lower {
     font-size: 16px;
     color: #FFA463;
 }
@@ -159,12 +184,15 @@ body{
     padding: 32px;
     gap: 10px;
 
+    text-transform: capitalize;
+    
     width: 100%;
-    height: 94px;
-    margin-top: 14px;
     background: #90278F;
-    border-radius: 30px;
 
+    margin-top: 2rem;
+    font-size: 1.3rem;
+    height: 72px;
+    border-radius: 18px;
     /* Inside auto layout */
 
     flex: none;
@@ -172,7 +200,10 @@ body{
     align-self: stretch;
     flex-grow: 0;
     color: #FFFFFF;
-    font-size: 35px;
+}
+
+#filesUploaded {
+    font-weight: 500;
 }
 
 .share-button:hover {
@@ -186,10 +217,11 @@ body{
     gap: 10px;
 
     width: 100%;
-    height: 94px;
-    margin-top: 14px;
     background: #FFA463;
-    border-radius: 30px;
+    margin-top: 2rem;
+    font-size: 1.3rem;
+    height: 72px;
+    border-radius: 18px;
 
     /* Inside auto layout */
 
@@ -198,7 +230,6 @@ body{
     align-self: stretch;
     flex-grow: 0;
     color: #FFFFFF;
-    font-size: 35px;
 }
 
 .input-message {
@@ -225,10 +256,11 @@ body{
     background: #FFFFFF;
     border: 1px dashed #8F9DCE;
     border-radius: 4px;
-    display: inline-block;        /* [4] */
+    display: inline-block; /* [4] */
     vertical-align: middle;
     text-align: center;
 }
+
 .default-text {
     margin-top: 15px;
     height: 100%;
@@ -250,12 +282,14 @@ body{
     margin-bottom: 3px;
     margin-left: 0px;
 }
+
 .image-file-upload {
     position: center;
     margin-top: 12px;
     margin-bottom: 3px;
     padding: 0 !important;
 }
+
 .text-files-upload {
     margin-top: 2px;
     margin-right: 0;