feat: restyle t-alert component

restyle TAlert component

Signed-off-by: evgeniybryzh<evgeniy@merge.rocks>
Signed-off-by: Artem Chernyshev <artem.chernyshev@talos-systems.com>

README.md

@@ -6,6 +6,22 @@ Then Kubernetes credentials are requested from the Talos API.
 
 `TALOSCONFIG` environment variable can be used to alter the lookup path for the Talos configuration.
 
+## Compatibility Matrix
+
+Theila versions are compatible with the following versions of Talos:
+
+|               | v0.11 | v0.12  | v0.13 | v0.14 | v1.0  |
+| ------------- | ----- | ------ | ----- | ----- | ----- |
+| Theila (v0.1) | ✓     | ✓      | ✓     | ✓     |       |
+| Theila (v0.2) | ✓     | ✓      | ✓     | ✓     | ✓     |
+
+CAPI compatibility matrix:
+
+|               | v1alpha3 (v0.3) | v1alpha4 (v0.4) | v1beta1 (v1.x) |
+| ------------- | --------------- | --------------- | -------------- |
+| Theila (v0.1) | ✓               | ✓               |                |
+| Theila (v0.2) |                 |                 | ✓              |
+
 ## Documentation
 
 For instructions on deploying and managing Talos, see the [Documentation](https://www.talos.dev/docs/latest/).

frontend/src/components/TAlert.vue

@@ -4,77 +4,54 @@ License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at http://mozilla.org/MPL/2.0/.
 -->
 <template>
-  <div :class="classes" v-if="!closed">
-    <div class="flex">
-      <div class="flex-shrink-0" id="icon">
+  <div class="alert" :class="'alert-' + type">
+    <div class="alert__box">
+      <div class="alert__icon-wrapper" id="icon">
         <component :is="'icon-' + type" />
       </div>
-      <div class="ml-3">
+      <div class="alert__info-wrapper">
         <h3 id="title">{{ title }}</h3>
         <div id="description">
           <p>
             <slot></slot>
           </p>
         </div>
       </div>
-      <div class="pl-3 ml-auto" v-if="withDismiss">
-        <div class="-mx-1.5 -my-1.5">
-          <button
-            type="button"
-            @click="closed = true"
-            id="dismiss"
-            class="hover:bg-black dark:hover:bg-white hover:bg-opacity-10 focus:bg-black dark:focus:bg-white focus:outline-none focus:bg-opacity-10 focus:shadow-outline"
-          >
-            <span class="sr-only">Dismiss</span><x-icon class="w-5 h-5" />
-          </button>
-        </div>
-      </div>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { ref } from "vue";
-import {
-  ExclamationIcon,
-  XCircleIcon,
-  InformationCircleIcon,
-  CheckCircleIcon,
-} from "@heroicons/vue/solid";
+import { XCircleIcon, InformationCircleIcon } from "@heroicons/vue/solid";
 import { XIcon } from "@heroicons/vue/outline";
 
 export default {
   components: {
     XIcon,
-    "icon-warning": ExclamationIcon,
     "icon-error": XCircleIcon,
-    "icon-success": CheckCircleIcon,
     "icon-info": InformationCircleIcon,
   },
 
   props: {
     type: String,
     title: String,
-    withDismiss: Boolean,
-  },
-
-  setup() {
-    const closed = ref(false);
-
-    return {
-      closed,
-    };
-  },
-
-  computed: {
-    classes() {
-      return `p-4 rounded-md alert-${this.type}`;
-    },
   },
 };
 </script>
 
 <style>
+.alert {
+  @apply p-4 rounded-md;
+}
+.alert__box {
+  @apply flex;
+}
+.alert__icon-wrapper {
+  @apply flex justify-center items-center;
+}
+.alert__info-wrapper {
+  @apply ml-3;
+}
 #title {
   @apply text-sm font-medium;
 }
@@ -87,63 +64,37 @@ export default {
   @apply w-5 h-5;
 }
 
-#dismiss {
-  @apply relative block px-1 py-1 text-sm font-semibold leading-5 transition-colors duration-200 bg-transparent rounded-md select-none;
-}
-
 .alert-error {
-  @apply bg-red-300 bg-opacity-10;
+  border: 1px solid #272932;
+  border-left-width: 4px;
+  border-left-color: #6e2f30;
 }
 
-.alert-error #title,
-.alert-error #dismiss,
-.alert-error #description {
+.alert-error #title {
   @apply text-red-400;
 }
+.alert-error #description {
+  @apply text-naturals-N9;
+}
 
 .alert-error #icon {
-  @apply text-red-300;
+  @apply text-red-400;
 }
 
 .alert-info {
-  @apply bg-blue-300 bg-opacity-10;
+  border: 1px solid #272932;
+  border-left-width: 4px;
+  border-left-color: #0c6ee7;
 }
 
-.alert-info #title,
-.alert-info #dismiss,
-.alert-info #description {
+.alert-info #title {
   @apply text-blue-400;
 }
-
-.alert-info #icon {
-  @apply text-blue-300;
-}
-
-.alert-success {
-  @apply bg-green-300 bg-opacity-10;
-}
-
-.alert-success #title,
-.alert-success #dismiss,
-.alert-success #description {
-  @apply text-green-400;
-}
-
-.alert-success #icon {
-  @apply text-green-300;
-}
-
-.alert-warning {
-  @apply bg-yellow-300 bg-opacity-10;
-}
-
-.alert-warning #title,
-.alert-warning #dismiss,
-.alert-warning #description {
-  @apply text-yellow-200;
+.alert-info #description {
+  @apply text-naturals-N9;
 }
 
-.alert-warning #icon {
-  @apply text-yellow-400;
+.alert-info #icon {
+  @apply text-blue-400;
 }
 </style>