List buckets re-design (#1058)

* New Bucket Listing Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com> Co-authored-by: Alex <33497058+bexsoft@users.noreply.github.com> Co-authored-by: Lenin Alevski <alevsk.8772@gmail.com>
2021-09-20 11:13:34 -07:00
parent d85b693751
commit 64e38ca8d3
42 changed files with 1126 additions and 411 deletions
--- a/go.mod
+++ b/go.mod
@@ -19,7 +19,7 @@ require (
 	github.com/minio/cli v1.22.0
 	github.com/minio/direct-csi v1.3.5-0.20210601185811-f7776f7961bf
 	github.com/minio/kes v0.11.0
-	github.com/minio/madmin-go v1.1.5
+	github.com/minio/madmin-go v1.1.6-0.20210917204419-f12dc0d0a8bd
 	github.com/minio/mc v0.0.0-20210626002108-cebf3318546f
 	github.com/minio/minio-go/v7 v7.0.14
 	github.com/minio/operator v0.0.0-20210812082324-26350f153661
--- a/go.sum
+++ b/go.sum
@@ -877,8 +877,8 @@ github.com/minio/filepath v1.0.0/go.mod h1:/nRZA2ldl5z6jT9/KQuvZcQlxZIMQoFFQPvEX
 github.com/minio/kes v0.11.0 h1:8ma6OCVSxKT50b1uYXLJro3m7PmZtCLxBaTddQexI5k=
 github.com/minio/kes v0.11.0/go.mod h1:mTF1Bv8YVEtQqF/B7Felp4tLee44Pp+dgI0rhCvgNg8=
 github.com/minio/madmin-go v1.0.12/go.mod h1:BK+z4XRx7Y1v8SFWXsuLNqQqnq5BO/axJ8IDJfgyvfs=
-github.com/minio/madmin-go v1.1.5 h1:xfzHwQ/KeKDQZKLqllNSyexwOPM/tvc13UdCeVMzADY=
-github.com/minio/madmin-go v1.1.5/go.mod h1:xIPJHUbyYhNDgeD9Wov5Fz5/p7DIW0u+q6Rs/+Xu2TM=
+github.com/minio/madmin-go v1.1.6-0.20210917204419-f12dc0d0a8bd h1:NRQh43NGG+GThP26HufDWUp6pNhR1anfG7phaUDxYMk=
+github.com/minio/madmin-go v1.1.6-0.20210917204419-f12dc0d0a8bd/go.mod h1:vw+c3/u+DeVKqReEavo///Cl2OO8nt5s4ee843hJeLs=
 github.com/minio/mc v0.0.0-20210626002108-cebf3318546f h1:hyFvo5hSFw2K417YvDr/vAKlgCG69uTuhZW/5LNdL0U=
 github.com/minio/mc v0.0.0-20210626002108-cebf3318546f/go.mod h1:tuaonkPjVApCXkbtKENHBtsqUf7YTV33qmFrC+Pgp5g=
 github.com/minio/md5-simd v1.1.0/go.mod h1:XpBqgZULrMYD3R+M28PcmP0CkI7PEMzB3U77ZrKZ0Gw=
@@ -1062,8 +1062,9 @@ github.com/prometheus/procfs v0.0.2/go.mod h1:TjEm7ze935MbeOT/UhFTIMYKhuLP4wbCsT
 github.com/prometheus/procfs v0.0.8/go.mod h1:7Qr8sr6344vo1JqZ6HhLceV9o3AJ1Ff+GxbHq6oeK9A=
 github.com/prometheus/procfs v0.1.3/go.mod h1:lV6e/gmhEcM9IjHGsFOCxxuZ+z1YqCvr4OA4YeYWdaU=
 github.com/prometheus/procfs v0.2.0/go.mod h1:lV6e/gmhEcM9IjHGsFOCxxuZ+z1YqCvr4OA4YeYWdaU=
-github.com/prometheus/procfs v0.6.0 h1:mxy4L2jP6qMonqmq+aTtOx1ifVWUgG/TAmntgbh3xv4=
 github.com/prometheus/procfs v0.6.0/go.mod h1:cz+aTbrPOrUb4q7XlbU9ygM+/jj0fzG6c1xBZuNvfVA=
+github.com/prometheus/procfs v0.7.3 h1:4jVXhlkAyzOScmCkXBTOLRLTz8EeU+eyjrwB/EPq0VU=
+github.com/prometheus/procfs v0.7.3/go.mod h1:cz+aTbrPOrUb4q7XlbU9ygM+/jj0fzG6c1xBZuNvfVA=
 github.com/prometheus/tsdb v0.7.1/go.mod h1:qhTCs0VvXwvX/y3TZrWD7rabWM+ijKTux40TwIPHuXU=
 github.com/quasilyte/go-consistent v0.0.0-20190521200055-c6f3937de18c/go.mod h1:5STLWrekHfjyYwxBRVRXNOSewLJ3PWfDJd1VyTS21fI=
 github.com/quasilyte/go-ruleguard v0.1.2-0.20200318202121-b00d7a75d3d8/go.mod h1:CGFX09Ci3pq9QZdj86B+VGIdNj4VyCo2iPOGS9esB/k=
--- a/models/bucket.go
+++ b/models/bucket.go
@@ -24,6 +24,7 @@ package models

 import (
 	"context"
+	"encoding/json"

 	"github.com/go-openapi/errors"
 	"github.com/go-openapi/strfmt"
@@ -42,11 +43,20 @@ type Bucket struct {
 	// creation date
 	CreationDate string `json:"creation_date,omitempty"`

+	// details
+	Details *BucketDetails `json:"details,omitempty"`
+
 	// name
 	// Required: true
 	// Min Length: 3
 	Name *string `json:"name"`

+	// objects
+	Objects int64 `json:"objects,omitempty"`
+
+	// rw access
+	RwAccess *BucketRwAccess `json:"rw_access,omitempty"`
+
 	// size
 	Size int64 `json:"size,omitempty"`
 }
@@ -59,10 +69,18 @@ func (m *Bucket) Validate(formats strfmt.Registry) error {
 		res = append(res, err)
 	}

+	if err := m.validateDetails(formats); err != nil {
+		res = append(res, err)
+	}
+
 	if err := m.validateName(formats); err != nil {
 		res = append(res, err)
 	}

+	if err := m.validateRwAccess(formats); err != nil {
+		res = append(res, err)
+	}
+
 	if len(res) > 0 {
 		return errors.CompositeValidationError(res...)
 	}
@@ -86,6 +104,23 @@ func (m *Bucket) validateAccess(formats strfmt.Registry) error {
 	return nil
 }

+func (m *Bucket) validateDetails(formats strfmt.Registry) error {
+	if swag.IsZero(m.Details) { // not required
+		return nil
+	}
+
+	if m.Details != nil {
+		if err := m.Details.Validate(formats); err != nil {
+			if ve, ok := err.(*errors.Validation); ok {
+				return ve.ValidateName("details")
+			}
+			return err
+		}
+	}
+
+	return nil
+}
+
 func (m *Bucket) validateName(formats strfmt.Registry) error {

 	if err := validate.Required("name", "body", m.Name); err != nil {
@@ -99,6 +134,23 @@ func (m *Bucket) validateName(formats strfmt.Registry) error {
 	return nil
 }

+func (m *Bucket) validateRwAccess(formats strfmt.Registry) error {
+	if swag.IsZero(m.RwAccess) { // not required
+		return nil
+	}
+
+	if m.RwAccess != nil {
+		if err := m.RwAccess.Validate(formats); err != nil {
+			if ve, ok := err.(*errors.Validation); ok {
+				return ve.ValidateName("rw_access")
+			}
+			return err
+		}
+	}
+
+	return nil
+}
+
 // ContextValidate validate this bucket based on the context it is used
 func (m *Bucket) ContextValidate(ctx context.Context, formats strfmt.Registry) error {
 	var res []error
@@ -107,6 +159,14 @@ func (m *Bucket) ContextValidate(ctx context.Context, formats strfmt.Registry) e
 		res = append(res, err)
 	}

+	if err := m.contextValidateDetails(ctx, formats); err != nil {
+		res = append(res, err)
+	}
+
+	if err := m.contextValidateRwAccess(ctx, formats); err != nil {
+		res = append(res, err)
+	}
+
 	if len(res) > 0 {
 		return errors.CompositeValidationError(res...)
 	}
@@ -127,6 +187,34 @@ func (m *Bucket) contextValidateAccess(ctx context.Context, formats strfmt.Regis
 	return nil
 }

+func (m *Bucket) contextValidateDetails(ctx context.Context, formats strfmt.Registry) error {
+
+	if m.Details != nil {
+		if err := m.Details.ContextValidate(ctx, formats); err != nil {
+			if ve, ok := err.(*errors.Validation); ok {
+				return ve.ValidateName("details")
+			}
+			return err
+		}
+	}
+
+	return nil
+}
+
+func (m *Bucket) contextValidateRwAccess(ctx context.Context, formats strfmt.Registry) error {
+
+	if m.RwAccess != nil {
+		if err := m.RwAccess.ContextValidate(ctx, formats); err != nil {
+			if ve, ok := err.(*errors.Validation); ok {
+				return ve.ValidateName("rw_access")
+			}
+			return err
+		}
+	}
+
+	return nil
+}
+
 // MarshalBinary interface implementation
 func (m *Bucket) MarshalBinary() ([]byte, error) {
 	if m == nil {
@@ -144,3 +232,236 @@ func (m *Bucket) UnmarshalBinary(b []byte) error {
 	*m = res
 	return nil
 }
+
+// BucketDetails bucket details
+//
+// swagger:model BucketDetails
+type BucketDetails struct {
+
+	// locking
+	Locking bool `json:"locking,omitempty"`
+
+	// quota
+	Quota *BucketDetailsQuota `json:"quota,omitempty"`
+
+	// replication
+	Replication bool `json:"replication,omitempty"`
+
+	// tags
+	Tags map[string]string `json:"tags,omitempty"`
+
+	// versioning
+	Versioning bool `json:"versioning,omitempty"`
+
+	// versioning suspended
+	VersioningSuspended bool `json:"versioningSuspended,omitempty"`
+}
+
+// Validate validates this bucket details
+func (m *BucketDetails) Validate(formats strfmt.Registry) error {
+	var res []error
+
+	if err := m.validateQuota(formats); err != nil {
+		res = append(res, err)
+	}
+
+	if len(res) > 0 {
+		return errors.CompositeValidationError(res...)
+	}
+	return nil
+}
+
+func (m *BucketDetails) validateQuota(formats strfmt.Registry) error {
+	if swag.IsZero(m.Quota) { // not required
+		return nil
+	}
+
+	if m.Quota != nil {
+		if err := m.Quota.Validate(formats); err != nil {
+			if ve, ok := err.(*errors.Validation); ok {
+				return ve.ValidateName("details" + "." + "quota")
+			}
+			return err
+		}
+	}
+
+	return nil
+}
+
+// ContextValidate validate this bucket details based on the context it is used
+func (m *BucketDetails) ContextValidate(ctx context.Context, formats strfmt.Registry) error {
+	var res []error
+
+	if err := m.contextValidateQuota(ctx, formats); err != nil {
+		res = append(res, err)
+	}
+
+	if len(res) > 0 {
+		return errors.CompositeValidationError(res...)
+	}
+	return nil
+}
+
+func (m *BucketDetails) contextValidateQuota(ctx context.Context, formats strfmt.Registry) error {
+
+	if m.Quota != nil {
+		if err := m.Quota.ContextValidate(ctx, formats); err != nil {
+			if ve, ok := err.(*errors.Validation); ok {
+				return ve.ValidateName("details" + "." + "quota")
+			}
+			return err
+		}
+	}
+
+	return nil
+}
+
+// MarshalBinary interface implementation
+func (m *BucketDetails) MarshalBinary() ([]byte, error) {
+	if m == nil {
+		return nil, nil
+	}
+	return swag.WriteJSON(m)
+}
+
+// UnmarshalBinary interface implementation
+func (m *BucketDetails) UnmarshalBinary(b []byte) error {
+	var res BucketDetails
+	if err := swag.ReadJSON(b, &res); err != nil {
+		return err
+	}
+	*m = res
+	return nil
+}
+
+// BucketDetailsQuota bucket details quota
+//
+// swagger:model BucketDetailsQuota
+type BucketDetailsQuota struct {
+
+	// quota
+	Quota int64 `json:"quota,omitempty"`
+
+	// type
+	// Enum: [fifo hard]
+	Type string `json:"type,omitempty"`
+}
+
+// Validate validates this bucket details quota
+func (m *BucketDetailsQuota) Validate(formats strfmt.Registry) error {
+	var res []error
+
+	if err := m.validateType(formats); err != nil {
+		res = append(res, err)
+	}
+
+	if len(res) > 0 {
+		return errors.CompositeValidationError(res...)
+	}
+	return nil
+}
+
+var bucketDetailsQuotaTypeTypePropEnum []interface{}
+
+func init() {
+	var res []string
+	if err := json.Unmarshal([]byte(`["fifo","hard"]`), &res); err != nil {
+		panic(err)
+	}
+	for _, v := range res {
+		bucketDetailsQuotaTypeTypePropEnum = append(bucketDetailsQuotaTypeTypePropEnum, v)
+	}
+}
+
+const (
+
+	// BucketDetailsQuotaTypeFifo captures enum value "fifo"
+	BucketDetailsQuotaTypeFifo string = "fifo"
+
+	// BucketDetailsQuotaTypeHard captures enum value "hard"
+	BucketDetailsQuotaTypeHard string = "hard"
+)
+
+// prop value enum
+func (m *BucketDetailsQuota) validateTypeEnum(path, location string, value string) error {
+	if err := validate.EnumCase(path, location, value, bucketDetailsQuotaTypeTypePropEnum, true); err != nil {
+		return err
+	}
+	return nil
+}
+
+func (m *BucketDetailsQuota) validateType(formats strfmt.Registry) error {
+	if swag.IsZero(m.Type) { // not required
+		return nil
+	}
+
+	// value enum
+	if err := m.validateTypeEnum("details"+"."+"quota"+"."+"type", "body", m.Type); err != nil {
+		return err
+	}
+
+	return nil
+}
+
+// ContextValidate validates this bucket details quota based on context it is used
+func (m *BucketDetailsQuota) ContextValidate(ctx context.Context, formats strfmt.Registry) error {
+	return nil
+}
+
+// MarshalBinary interface implementation
+func (m *BucketDetailsQuota) MarshalBinary() ([]byte, error) {
+	if m == nil {
+		return nil, nil
+	}
+	return swag.WriteJSON(m)
+}
+
+// UnmarshalBinary interface implementation
+func (m *BucketDetailsQuota) UnmarshalBinary(b []byte) error {
+	var res BucketDetailsQuota
+	if err := swag.ReadJSON(b, &res); err != nil {
+		return err
+	}
+	*m = res
+	return nil
+}
+
+// BucketRwAccess bucket rw access
+//
+// swagger:model BucketRwAccess
+type BucketRwAccess struct {
+
+	// read
+	Read bool `json:"read,omitempty"`
+
+	// write
+	Write bool `json:"write,omitempty"`
+}
+
+// Validate validates this bucket rw access
+func (m *BucketRwAccess) Validate(formats strfmt.Registry) error {
+	return nil
+}
+
+// ContextValidate validates this bucket rw access based on context it is used
+func (m *BucketRwAccess) ContextValidate(ctx context.Context, formats strfmt.Registry) error {
+	return nil
+}
+
+// MarshalBinary interface implementation
+func (m *BucketRwAccess) MarshalBinary() ([]byte, error) {
+	if m == nil {
+		return nil, nil
+	}
+	return swag.WriteJSON(m)
+}
+
+// UnmarshalBinary interface implementation
+func (m *BucketRwAccess) UnmarshalBinary(b []byte) error {
+	var res BucketRwAccess
+	if err := swag.ReadJSON(b, &res); err != nil {
+		return err
+	}
+	*m = res
+	return nil
+}
--- a/portal-ui/package.json
+++ b/portal-ui/package.json
@@ -6,10 +6,10 @@
  "dependencies": {
    "@date-io/moment": "1.x",
    "@hot-loader/react-dom": "17.0.1",
-    "@material-ui/core": "^4.11.2",
+    "@material-ui/core": "^4.12.3",
    "@material-ui/icons": "^4.11.2",
-    "@material-ui/lab": "^4.0.0-alpha.58",
-    "@material-ui/pickers": "^3.2.10",
+    "@material-ui/lab": "^4.0.0-alpha.60",
+    "@material-ui/pickers": "^3.3.10",
    "@types/history": "^4.7.3",
    "@types/jest": "24.0.23",
    "@types/lodash": "^4.14.149",
--- a/portal-ui/public/index.html
+++ b/portal-ui/public/index.html
@@ -3,8 +3,16 @@
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#081C42" media="(prefers-color-scheme: light)"/>
-    <meta name="theme-color" content="#081C42" media="(prefers-color-scheme: dark)"/>
+    <meta
+      name="theme-color"
+      content="#081C42"
+      media="(prefers-color-scheme: light)"
+    />
+    <meta
+      name="theme-color"
+      content="#081C42"
+      media="(prefers-color-scheme: dark)"
+    />
    <meta name="description" content="MinIO Console" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
--- a/portal-ui/src/common/utils.ts
+++ b/portal-ui/src/common/utils.ts
@@ -548,3 +548,11 @@ export const textToRGBColor = (text: string) => {

  return `#${hashColored.padStart(6, "0")}`;
 };
+
+export const prettyNumber = (usage: number | undefined) => {
+  if (usage === undefined) {
+    return 0;
+  }
+
+  return usage.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+};
--- a/portal-ui/src/icons/ArrowRightIcon.tsx
+++ b/portal-ui/src/icons/ArrowRightIcon.tsx
@@ -0,0 +1,30 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2021 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import * as React from "react";
+import { SvgIcon, SvgIconProps } from "@material-ui/core";
+
+const ArrowRightIcon = (props: SvgIconProps) => {
+  return (
+    <SvgIcon {...props}>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 255.338 154.163">
+        <path d="M19.745 57.063c-26.326 0-26.326 40.032 0 40.032H187l-22.68 22.669c-18.608 18.622 9.7 46.922 28.308 28.316l56.73-56.732a20.027 20.027 0 000-28.548l-56.73-56.716c-18.608-18.6-46.916 9.684-28.308 28.3L187 57.064H19.745z" />
+      </svg>
+    </SvgIcon>
+  );
+};
+
+export default ArrowRightIcon;
--- a/portal-ui/src/icons/CalendarIcon.tsx
+++ b/portal-ui/src/icons/CalendarIcon.tsx
@@ -0,0 +1,69 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2021 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import * as React from "react";
+import { SvgIcon, SvgIconProps } from "@material-ui/core";
+
+const CalendarIcon = (props: SvgIconProps) => {
+  return (
+    <SvgIcon {...props}>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 221.371 254.207">
+        <path
+          data-name="Trazado 412"
+          d="M47.443 145.862h24.651c3.4 0 6.162-3.188 6.162-7.115s-2.762-7.115-6.162-7.115H47.443c-3.4 0-6.164 3.188-6.164 7.115s2.758 7.115 6.164 7.115z"
+        />
+        <path
+          data-name="Trazado 413"
+          d="M100.296 145.862h24.651c3.4 0 6.162-3.188 6.162-7.115s-2.76-7.115-6.162-7.115h-24.651c-3.4 0-6.162 3.188-6.162 7.115s2.762 7.115 6.162 7.115z"
+        />
+        <path
+          data-name="Trazado 414"
+          d="M148.612 145.862h24.651c3.4 0 6.162-3.188 6.162-7.115s-2.762-7.115-6.162-7.115h-24.651c-3.4 0-6.165 3.188-6.165 7.115s2.762 7.115 6.165 7.115z"
+        />
+        <path
+          data-name="Trazado 415"
+          d="M47.443 177.886h24.651c3.4 0 6.162-3.188 6.162-7.115s-2.762-7.115-6.162-7.115H47.443c-3.4 0-6.164 3.188-6.164 7.115s2.758 7.115 6.164 7.115z"
+        />
+        <path
+          data-name="Trazado 416"
+          d="M100.296 177.886h24.651c3.4 0 6.162-3.188 6.162-7.115s-2.76-7.115-6.162-7.115h-24.651c-3.4 0-6.162 3.188-6.162 7.115s2.762 7.115 6.162 7.115z"
+        />
+        <path
+          data-name="Trazado 417"
+          d="M148.612 177.886h24.651c3.4 0 6.162-3.188 6.162-7.115s-2.762-7.115-6.162-7.115h-24.651c-3.4 0-6.165 3.188-6.165 7.115s2.762 7.115 6.165 7.115z"
+        />
+        <path
+          data-name="Trazado 418"
+          d="M47.443 209.909h24.651c3.4 0 6.162-3.187 6.162-7.115s-2.762-7.115-6.162-7.115H47.443c-3.4 0-6.164 3.188-6.164 7.115s2.758 7.115 6.164 7.115z"
+        />
+        <path
+          data-name="Trazado 419"
+          d="M100.296 209.909h24.651c3.4 0 6.162-3.187 6.162-7.115s-2.76-7.115-6.162-7.115h-24.651c-3.4 0-6.162 3.188-6.162 7.115s2.762 7.115 6.162 7.115z"
+        />
+        <path
+          data-name="Trazado 420"
+          d="M148.612 209.909h24.651c3.4 0 6.162-3.187 6.162-7.115s-2.762-7.115-6.162-7.115h-24.651c-3.4 0-6.165 3.188-6.165 7.115s2.762 7.115 6.165 7.115z"
+        />
+        <path
+          data-name="Trazado 421"
+          d="M198.078 30.392h-15.951v-19.8a10.627 10.627 0 00-10.6-10.595 10.627 10.627 0 00-10.595 10.595v19.8h-40.089v-19.8a10.627 10.627 0 00-10.6-10.595 10.627 10.627 0 00-10.595 10.595v19.8H59.559v-19.8a10.627 10.627 0 00-10.6-10.595 10.627 10.627 0 00-10.595 10.595v19.8h-15.08A23.3 23.3 0 00-.011 53.687v177.225a23.294 23.294 0 0023.295 23.295h174.782a23.294 23.294 0 0023.295-23.295V53.687a23.294 23.294 0 00-23.283-23.295zm-3.051 197.409a.061.061 0 01-.062.062H26.408a.062.062 0 01-.064-.062V113.844h168.683z"
+        />
+      </svg>
+    </SvgIcon>
+  );
+};
+
+export default CalendarIcon;
--- a/portal-ui/src/icons/FileBookIcon.tsx
+++ b/portal-ui/src/icons/FileBookIcon.tsx
@@ -20,12 +20,7 @@ import { SvgIcon, SvgIconProps } from "@material-ui/core";
 const FileBookIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props}>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="1em"
-        height="1em"
-        viewBox="0 0 217.439 256"
-      >
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 217.439 256">
        <path
          data-name="Trazado 442"
          d="M216.996 77.195c.388-15.754.958-32.242-.5-47.941-1.094-11.755-6.192-21.735-17.831-25.914a42.569 42.569 0 00-5.016-1.448c-6.551-1.478-13.433-1.6-20.09-1.8-11.727-.343-23.45.366-35.176.314-23.494-.1-46.986.323-70.479.414q-4.228.018-8.456.018H17.242A17.26 17.26 0 00.002 18.079v220.678a17.26 17.26 0 0017.24 17.241h182.541a17.26 17.26 0 0017.241-17.241V128.812c-.002-17.183-.448-34.458-.028-51.617zm-20.92 145.986a14.889 14.889 0 01-14.889 14.888H32.818a14.888 14.888 0 01-14.888-14.888V33.658A14.889 14.889 0 0132.818 18.77h99.549v25.459a37.8 37.8 0 0037.756 37.759h25.952zm0-157.656h-25.952a21.32 21.32 0 01-21.295-21.3V18.766h32.358a14.889 14.889 0 0114.889 14.888z"
--- a/portal-ui/src/icons/FileCloudIcon.tsx
+++ b/portal-ui/src/icons/FileCloudIcon.tsx
@@ -20,12 +20,7 @@ import { SvgIcon, SvgIconProps } from "@material-ui/core";
 const FileCloudIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props}>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="1em"
-        height="1em"
-        viewBox="0 0 217.439 256"
-      >
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 217.439 256">
        <path
          data-name="Trazado 456"
          d="M216.997 77.194c.388-15.754.958-32.242-.5-47.942-1.093-11.755-6.192-21.735-17.831-25.915a42.482 42.482 0 00-5.016-1.447C187.1.411 180.217.29 173.56.09c-11.727-.343-23.45.365-35.176.314-23.494-.1-46.986.322-70.479.414q-4.228.016-8.456.017H17.243A17.26 17.26 0 00.002 18.075v220.679a17.26 17.26 0 0017.241 17.24h182.54a17.26 17.26 0 0017.241-17.24V128.812c-.002-17.184-.45-34.46-.027-51.618zm-20.923 145.983a14.889 14.889 0 01-14.889 14.889H32.816a14.889 14.889 0 01-14.888-14.889V33.658A14.887 14.887 0 0132.816 18.77h99.549v25.458a37.8 37.8 0 0037.756 37.76h25.952zm0-157.656h-25.952a21.32 21.32 0 01-21.295-21.3V18.763h32.358a14.888 14.888 0 0114.889 14.888z"
--- a/portal-ui/src/icons/FileCodeIcon.tsx
+++ b/portal-ui/src/icons/FileCodeIcon.tsx
@@ -20,12 +20,7 @@ import { SvgIcon, SvgIconProps } from "@material-ui/core";
 const FileCodeIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props}>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="1em"
-        height="1em"
-        viewBox="0 0 217.439 256"
-      >
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 217.439 256">
        <path
          data-name="Trazado 432"
          d="M216.997 77.194c.387-15.753.958-32.242-.5-47.941-1.093-11.756-6.192-21.735-17.831-25.916a42.532 42.532 0 00-5.016-1.447C187.1.412 180.218.29 173.56.09c-11.727-.343-23.45.366-35.176.314-23.494-.1-46.986.322-70.479.414q-4.228.018-8.456.017H17.243A17.26 17.26 0 00.003 18.076v220.679a17.26 17.26 0 0017.24 17.241h182.54a17.26 17.26 0 0017.24-17.241V128.812c-.002-17.183-.452-34.459-.026-51.618zm-20.926 145.992a14.888 14.888 0 01-14.889 14.888H32.813a14.888 14.888 0 01-14.888-14.888V33.658A14.888 14.888 0 0132.813 18.77h99.549v25.459a37.8 37.8 0 0037.756 37.759h25.953zm0-157.656h-25.952a21.32 21.32 0 01-21.295-21.3V18.771h32.358a14.888 14.888 0 0114.889 14.887z"
--- a/portal-ui/src/icons/FileConfigIcon.tsx
+++ b/portal-ui/src/icons/FileConfigIcon.tsx
@@ -20,12 +20,7 @@ import { SvgIcon, SvgIconProps } from "@material-ui/core";
 const FileConfigIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props}>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="1em"
-        height="1em"
-        viewBox="0 0 217.439 256"
-      >
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 217.439 256">
        <path
          data-name="Trazado 447"
          d="M160.658 125.38a51.282 51.282 0 00-1.483-3.533l8.145-10.875a7.2 7.2 0 00-.642-9.386l-14.659-14.767a7.2 7.2 0 00-9.387-.646l-10.881 8.2a51.149 51.149 0 00-3.53-1.482l-1.939-13.476a7.12 7.12 0 00-7.15-6.163H98.377a7.156 7.156 0 00-7.166 6.16L89.27 92.891c-1.2.45-2.377.947-3.532 1.483l-10.929-8.2a7.2 7.2 0 00-9.391.646l-14.654 14.653a7.2 7.2 0 00-.648 9.388l8.2 10.881a51.536 51.536 0 00-1.482 3.53l-13.474 1.939a7.181 7.181 0 00-6.165 7.15v20.7a7.186 7.186 0 006.16 7.165l13.479 1.939a50.6 50.6 0 001.484 3.535l-8.2 10.98a7.2 7.2 0 00.646 9.391l14.654 14.653a7.2 7.2 0 009.387.647l10.882-8.2a50.342 50.342 0 003.528 1.483l1.94 13.474a7.185 7.185 0 007.081 6.165h20.771a7.22 7.22 0 007.166-6.16l1.941-13.479a50.349 50.349 0 003.531-1.484l10.875 8.143a7.2 7.2 0 009.392-.646l14.654-14.654a7.2 7.2 0 00.65-9.381l-8.1-10.828a50.638 50.638 0 001.483-3.535l13.474-1.938a7.182 7.182 0 006.166-7.15v-20.77a7.13 7.13 0 00-6.093-7.1zm-12.348 30.522a42.914 42.914 0 01-3.577 9.063 7.2 7.2 0 00.038 7.61l7.2 9.616-5.855 5.973-9.47-7.247-.139-.1a7.179 7.179 0 00-7.534-.038 39.4 39.4 0 01-9.257 3.8 7.171 7.171 0 00-5.159 5.873l-1.707 11.559h-8.267l-1.709-11.767a7.173 7.173 0 00-5.178-5.883 39.4 39.4 0 01-9.232-3.8 7.235 7.235 0 00-7.666.336l-9.5 7.124-5.972-5.855 7.245-9.47.09-.13a7.156 7.156 0 00.052-7.583 42.986 42.986 0 01-3.81-9.216 7.171 7.171 0 00-5.872-5.161l-11.559-1.7v-8.26l11.768-1.708a7.179 7.179 0 005.885-5.187 42.929 42.929 0 013.577-9.167 7.2 7.2 0 00-.041-7.605l-7.344-9.613 5.982-5.985 9.484 7.256.139.1a7.19 7.19 0 007.534.037 39.452 39.452 0 019.256-3.8 7.167 7.167 0 005.16-5.872l1.705-11.559h8.268l1.708 11.768a7.179 7.179 0 005.178 5.883 39.369 39.369 0 019.232 3.794 7.237 7.237 0 007.668-.334l9.5-7.125 5.971 5.855-7.252 9.479a7.147 7.147 0 00-.511 7.865 42.947 42.947 0 013.81 9.217 7.173 7.173 0 005.877 5.162l11.792 1.712.117 8.208-11.746 1.706a7.179 7.179 0 00-5.879 5.17z"
--- a/portal-ui/src/icons/FileDbIcon.tsx
+++ b/portal-ui/src/icons/FileDbIcon.tsx
@@ -20,12 +20,7 @@ import { SvgIcon, SvgIconProps } from "@material-ui/core";
 const FileDbIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props}>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="1em"
-        height="1em"
-        viewBox="0 0 217.438 256"
-      >
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 217.438 256">
        <path
          data-name="Trazado 438"
          d="M107.662 93.007c-30.337 0-62.989 7.141-62.989 22.82v79.924c0 15.678 32.651 22.82 62.989 22.82s62.989-7.142 62.989-22.82v-79.924c-.001-15.679-32.652-22.82-62.989-22.82zm49.139 102.743c-.12 2.517-15.67 10.8-49.139 10.8-33.187 0-48.925-8.288-49.14-10.8v-25.689c11.441 4.913 29.524 7.81 49.14 7.81 19.684 0 37.763-2.908 49.139-7.843zm0-40.7c-.223 2.52-15.96 10.8-49.139 10.8s-48.925-8.29-49.14-10.8v-24.252c11.42 4.937 29.5 7.846 49.14 7.846 19.684 0 37.763-2.907 49.139-7.842zm-49.139-28.42c-33.187 0-48.925-8.289-49.14-10.8.214-2.518 15.952-10.807 49.14-10.807s48.925 8.289 49.139 10.8c-.214 2.515-15.952 10.805-49.139 10.805z"
--- a/portal-ui/src/icons/FileFontIcon.tsx
+++ b/portal-ui/src/icons/FileFontIcon.tsx
@@ -20,12 +20,7 @@ import { SvgIcon, SvgIconProps } from "@material-ui/core";
 const FileFontIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props}>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="1em"
-        height="1em"
-        viewBox="0 0 217.439 256"
-      >
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 217.439 256">
        <path
          data-name="Trazado 450"
          d="M217.001 77.194c.388-15.754.958-32.241-.5-47.941-1.094-11.755-6.193-21.736-17.831-25.914a42.392 42.392 0 00-5.017-1.448c-6.549-1.478-13.432-1.6-20.09-1.8-11.726-.343-23.448.365-35.175.314-23.493-.1-46.985.323-70.479.414q-4.228.016-8.456.017H17.247A17.26 17.26 0 00.007 18.077v220.678a17.259 17.259 0 0017.24 17.241h182.541a17.259 17.259 0 0017.241-17.241V128.812c-.007-17.183-.454-34.458-.028-51.618zm-20.922 145.988a14.888 14.888 0 01-14.888 14.888H32.823a14.888 14.888 0 01-14.888-14.888V33.658A14.888 14.888 0 0132.823 18.77h99.548v25.459a37.8 37.8 0 0037.757 37.759h25.951zm0-157.656h-25.951a21.321 21.321 0 01-21.3-21.3V18.767h32.359a14.888 14.888 0 0114.888 14.888z"
--- a/portal-ui/src/icons/FileImageIcon.tsx
+++ b/portal-ui/src/icons/FileImageIcon.tsx
@@ -20,12 +20,7 @@ import { SvgIcon, SvgIconProps } from "@material-ui/core";
 const FileImageIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props}>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="1em"
-        height="1em"
-        viewBox="0 0 217.631 256.227"
-      >
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 217.631 256.227">
        <path
          data-name="Trazado 422"
          d="M217.188 77.262c.389-15.768.96-32.27-.5-47.984-1.095-11.766-6.2-21.754-17.847-25.937a42.717 42.717 0 00-5.02-1.449c-6.556-1.479-13.445-1.6-20.108-1.8-11.737-.344-23.47.366-35.207.314-23.515-.1-47.027.324-70.541.415q-4.232.017-8.464.017H17.258A17.275 17.275 0 00.002 18.094v220.875a17.2 17.2 0 005.189 12.314v.035h.037a17.19 17.19 0 0012.027 4.907h182.7a17.275 17.275 0 0017.256-17.256V128.926c.002-17.198-.444-34.49-.023-51.664zM148.96 18.786h32.387a14.9 14.9 0 0114.9 14.9v31.9h-25.974a21.339 21.339 0 01-21.313-21.315zm-116.114 0h99.637v25.481a37.835 37.835 0 0037.79 37.792h25.974v94.9l-15.227-26.374a28.351 28.351 0 00-24.8-14.32 28.388 28.388 0 00-24.85 14.4l-10.021 17.81-27.633-47.861a28.351 28.351 0 00-24.8-14.319 28.389 28.389 0 00-24.85 14.4L17.95 167.117V33.687a14.9 14.9 0 0114.896-14.901zm-9.864 215.74a14.853 14.853 0 01-1.692-1.746l-1.561-34.31 39.036-69.391a11.6 11.6 0 0110.146-5.857 11.6 11.6 0 0110.146 5.857l61.387 106.324zm158.364 3.754h-19.7l-30.466-52.769 14.889-26.465a11.6 11.6 0 0110.146-5.858 11.6 11.6 0 0110.146 5.858l29.884 51.762v12.57a14.9 14.9 0 01-14.898 14.902z"
--- a/portal-ui/src/icons/FileLinkIcon.tsx
+++ b/portal-ui/src/icons/FileLinkIcon.tsx
@@ -20,12 +20,7 @@ import { SvgIcon, SvgIconProps } from "@material-ui/core";
 const FileLinkIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props}>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="1em"
-        height="1em"
-        viewBox="0 0 217.438 256"
-      >
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 217.438 256">
        <g data-name="Grupo 1551">
          <path
            data-name="Trazado 458"
--- a/portal-ui/src/icons/FileLockIcon.tsx
+++ b/portal-ui/src/icons/FileLockIcon.tsx
@@ -20,12 +20,7 @@ import { SvgIcon, SvgIconProps } from "@material-ui/core";
 const FileLockIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props}>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="1em"
-        height="1em"
-        viewBox="0 0 217.439 256"
-      >
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 217.439 256">
        <path
          data-name="Trazado 467"
          d="M216.995 77.194c.388-15.753.958-32.241-.5-47.941-1.094-11.756-6.192-21.735-17.831-25.916a42.7 42.7 0 00-5.016-1.447c-6.551-1.479-13.433-1.6-20.09-1.8-11.727-.343-23.449.364-35.176.313-23.494-.1-46.986.324-70.48.415q-4.226.015-8.455.017H17.241A17.26 17.26 0 00.001 18.076v220.678a17.26 17.26 0 0017.24 17.241h182.541a17.26 17.26 0 0017.241-17.241V128.812c-.001-17.183-.447-34.459-.028-51.618zm-20.921 145.989a14.888 14.888 0 01-14.888 14.887H32.817a14.888 14.888 0 01-14.888-14.887V33.658A14.888 14.888 0 0132.817 18.77h99.548v25.458a37.8 37.8 0 0037.757 37.76h25.952zm0-157.657h-25.952a21.32 21.32 0 01-21.295-21.3V18.768h32.358a14.889 14.889 0 0114.888 14.888z"
--- a/portal-ui/src/icons/FileMissingIcon.tsx
+++ b/portal-ui/src/icons/FileMissingIcon.tsx
@@ -20,12 +20,7 @@ import { SvgIcon, SvgIconProps } from "@material-ui/core";
 const FileMissingIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props}>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="1em"
-        height="1em"
-        viewBox="0 0 217.439 256"
-      >
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 217.439 256">
        <path
          data-name="Trazado 452"
          d="M216.997 77.195c.388-15.754.958-32.243-.5-47.941-1.094-11.756-6.193-21.735-17.831-25.915a42.732 42.732 0 00-5.017-1.448c-6.549-1.478-13.432-1.6-20.09-1.8-11.726-.345-23.448.364-35.175.314-23.493-.1-46.985.322-70.479.414q-4.228.015-8.456.017H17.243A17.26 17.26 0 00.002 18.076v220.679a17.26 17.26 0 0017.241 17.241h182.541a17.26 17.26 0 0017.241-17.241V128.812c-.003-17.183-.45-34.459-.028-51.617zm-20.922 145.986a14.888 14.888 0 01-14.888 14.888H32.819a14.888 14.888 0 01-14.888-14.888V33.658a14.887 14.887 0 0114.888-14.887h99.548v25.458a37.8 37.8 0 0037.758 37.759h25.951zm0-157.656h-25.951a21.321 21.321 0 01-21.3-21.3V18.767h32.359a14.887 14.887 0 0114.888 14.887z"
--- a/portal-ui/src/icons/FileMusicIcon.tsx
+++ b/portal-ui/src/icons/FileMusicIcon.tsx
@@ -20,12 +20,7 @@ import { SvgIcon, SvgIconProps } from "@material-ui/core";
 const FileMusicIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props}>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="1em"
-        height="1em"
-        viewBox="0 0 217.438 256"
-      >
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 217.438 256">
        <g data-name="Grupo 1552">
          <path
            data-name="Trazado 470"
--- a/portal-ui/src/icons/FilePdfIcon.tsx
+++ b/portal-ui/src/icons/FilePdfIcon.tsx
@@ -22,7 +22,6 @@ const FilePdfIcon = (props: SvgIconProps) => {
    <SvgIcon {...props}>
      <svg
        xmlns="http://www.w3.org/2000/svg"
-        width="1em"
        height="1em"
        viewBox="0 0 217.438 256"
      >
--- a/portal-ui/src/icons/FilePptIcon.tsx
+++ b/portal-ui/src/icons/FilePptIcon.tsx
@@ -20,12 +20,7 @@ import { SvgIcon, SvgIconProps } from "@material-ui/core";
 const FilePptIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props}>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="1em"
-        height="1em"
-        viewBox="0 0 217.584 256"
-      >
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 217.584 256">
        <path
          data-name="Trazado 444"
          d="M216.958 77.225c-.42-38.067 10.409-79.987-43.432-77.084-38.015.09-76.056.657-114.089.743h-42.2A17.258 17.258 0 000 18.125v220.64a17.258 17.258 0 0017.239 17.237h182.507a17.257 17.257 0 0017.237-17.237c.186-53.84-.296-107.719-.025-161.54zM196.04 223.186a14.885 14.885 0 01-14.885 14.885H32.813a14.885 14.885 0 01-14.885-14.885V33.698a14.885 14.885 0 0114.885-14.885h99.53c-1.936 29.6.791 61.322 37.752 63.206h25.946zm0-157.627c-17.937-.276-46.31 4.9-47.237-21.294V18.812c50.266-.527 47.99-3.935 47.237 46.748z"
--- a/portal-ui/src/icons/FileTxtIcon.tsx
+++ b/portal-ui/src/icons/FileTxtIcon.tsx
@@ -20,12 +20,7 @@ import { SvgIcon, SvgIconProps } from "@material-ui/core";
 const FileTxtIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props}>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="1em"
-        height="1em"
-        viewBox="0 0 217.439 256"
-      >
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 217.439 256">
        <path
          data-name="Trazado 426"
          d="M216.997 77.194c.388-15.753.958-32.242-.5-47.941-1.094-11.756-6.193-21.735-17.831-25.914a42.44 42.44 0 00-5.017-1.448c-6.549-1.478-13.432-1.6-20.09-1.8-11.726-.343-23.448.366-35.175.314-23.493-.1-46.985.323-70.479.414q-4.228.018-8.455.017H17.243A17.26 17.26 0 00.002 18.077v220.679a17.261 17.261 0 0017.241 17.241h182.542a17.26 17.26 0 0017.24-17.241V128.812c.001-17.183-.45-34.459-.028-51.618zm-20.922 145.988a14.888 14.888 0 01-14.888 14.888H32.818a14.888 14.888 0 01-14.892-14.884V33.658A14.888 14.888 0 0132.814 18.77h99.548v25.459a37.8 37.8 0 0037.764 37.757h25.951zm0-157.656h-25.949a21.321 21.321 0 01-21.3-21.3V18.767h32.359a14.888 14.888 0 0114.888 14.888z"
--- a/portal-ui/src/icons/FileVideoIcon.tsx
+++ b/portal-ui/src/icons/FileVideoIcon.tsx
@@ -20,12 +20,7 @@ import { SvgIcon, SvgIconProps } from "@material-ui/core";
 const FileVideoIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props}>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="1em"
-        height="1em"
-        viewBox="0 0 217.438 256"
-      >
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 217.438 256">
        <path
          data-name="Trazado 424"
          d="M216.997 77.193c.387-15.754.958-32.242-.5-47.942-1.092-11.755-6.192-21.735-17.832-25.915a42.471 42.471 0 00-5.016-1.447C187.1.41 180.217.289 173.559.089c-11.726-.344-23.449.364-35.176.314-23.494-.1-46.985.322-70.479.414q-4.229.016-8.456.017H17.242a17.26 17.26 0 00-17.24 17.24v220.68a17.26 17.26 0 0017.24 17.24H199.78a17.26 17.26 0 0017.241-17.24V128.812c0-17.184-.441-34.459-.024-51.619zM196.075 223.18a14.889 14.889 0 01-14.888 14.888H32.818A14.889 14.889 0 0117.93 223.18V33.658A14.888 14.888 0 0132.818 18.77h99.547v25.458a37.8 37.8 0 0037.757 37.76h25.952zm0-157.657h-25.952a21.32 21.32 0 01-21.295-21.3V18.765h32.359a14.888 14.888 0 0114.888 14.888z"
--- a/portal-ui/src/icons/FileWorldIcon.tsx
+++ b/portal-ui/src/icons/FileWorldIcon.tsx
@@ -20,12 +20,7 @@ import { SvgIcon, SvgIconProps } from "@material-ui/core";
 const FileWorldIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props}>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="1em"
-        height="1em"
-        viewBox="0 0 217.439 256"
-      >
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 217.439 256">
        <path
          data-name="Trazado 465"
          d="M216.997 77.194c.388-15.754.958-32.242-.5-47.941-1.094-11.755-6.193-21.736-17.831-25.915a42.4 42.4 0 00-5.017-1.447C187.1.412 180.217.291 173.56.091c-11.727-.343-23.45.366-35.177.314-23.493-.1-46.985.322-70.479.414q-4.228.018-8.455.017H17.242A17.26 17.26 0 00.001 18.076v220.687a17.26 17.26 0 0017.241 17.24h182.541a17.26 17.26 0 0017.24-17.24V128.811c.003-17.182-.448-34.458-.026-51.617zM196.075 223.18a14.888 14.888 0 01-14.888 14.89H32.818a14.888 14.888 0 01-14.888-14.89V33.663a14.888 14.888 0 0114.888-14.889h99.548v25.459a37.8 37.8 0 0037.757 37.758h25.951zm0-157.655h-25.949a21.321 21.321 0 01-21.3-21.3V18.766h32.359a14.888 14.888 0 0114.888 14.889z"
--- a/portal-ui/src/icons/FileXlsIcon.tsx
+++ b/portal-ui/src/icons/FileXlsIcon.tsx
@@ -20,12 +20,7 @@ import { SvgIcon, SvgIconProps } from "@material-ui/core";
 const FileXlsIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props}>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="1em"
-        height="1em"
-        viewBox="0 0 217.439 256"
-      >
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 217.439 256">
        <path
          data-name="Trazado 461"
          d="M216.997 77.195c.386-15.753.957-32.242-.5-47.942-1.094-11.755-6.193-21.735-17.832-25.914a42.458 42.458 0 00-5.017-1.448c-6.549-1.479-13.432-1.6-20.09-1.8-11.726-.343-23.448.366-35.176.314-23.494-.1-46.985.324-70.479.415q-4.228.017-8.456.017H17.241A17.26 17.26 0 00.001 18.079v220.678a17.26 17.26 0 0017.24 17.24H199.78a17.259 17.259 0 0017.24-17.24V128.812c.002-17.183-.44-34.458-.023-51.617zm-20.922 145.988a14.888 14.888 0 01-14.888 14.888H32.819a14.888 14.888 0 01-14.888-14.888V33.658A14.888 14.888 0 0132.819 18.77h99.547v25.459a37.8 37.8 0 0037.757 37.758h25.952zm0-157.657h-25.952a21.32 21.32 0 01-21.295-21.3V18.767h32.359a14.888 14.888 0 0114.888 14.888z"
--- a/portal-ui/src/icons/FileZipIcon.tsx
+++ b/portal-ui/src/icons/FileZipIcon.tsx
@@ -4,12 +4,7 @@ import { SvgIcon, SvgIconProps } from "@material-ui/core";
 const FileZipIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props}>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="1em"
-        height="1em"
-        viewBox="0 0 217.439 256"
-      >
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 217.439 256">
        <g transform="translate(3467.334 -3812.007)">
          <path
            data-name="Trazado 436"
--- a/portal-ui/src/icons/ShareIcon.tsx
+++ b/portal-ui/src/icons/ShareIcon.tsx
@@ -20,12 +20,7 @@ import { SvgIcon, SvgIconProps } from "@material-ui/core";
 const ShareIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props}>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="1em"
-        height="1em"
-        viewBox="0 0 255.999 243.852"
-      >
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 255.999 243.852">
        <path
          data-name="Trazado 410"
          d="M251.315 67.671L207.79 25.459c-14.279-13.851-35.342 7.862-21.063 21.716l12.959 12.567a156.689 156.689 0 00-82.95 23.182 156.774 156.774 0 00-71.051 97.677 15.547 15.547 0 0011.474 18.755 15.62 15.62 0 003.655.438 15.555 15.555 0 0015.1-11.909c14.6-60.586 70.74-100.461 130.9-96.758l-3.335 4.317-15.767 16.248c-13.849 14.285 7.867 35.345 21.719 21.063l42.214-43.518a15.131 15.131 0 00-.33-21.566z"
--- a/portal-ui/src/icons/UsageIcon.tsx
+++ b/portal-ui/src/icons/UsageIcon.tsx
@@ -1,63 +0,0 @@
-// This file is part of MinIO Console Server
-// Copyright (c) 2021 MinIO, Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-import React from "react";
-import { SvgIcon } from "@material-ui/core";
-
-const UsageIcon = () => {
-  return (
-    <SvgIcon viewBox="0 0 16.172 17.187">
-      <defs>
-        <linearGradient
-          id="a"
-          y1="0.5"
-          x2="1"
-          y2="0.5"
-          gradientUnits="objectBoundingBox"
-        >
-          <stop offset="0.044" stopColor="#362585" />
-          <stop offset="0.301" stopColor="#281b6f" />
-          <stop offset="1" stopColor="#1e1560" />
-        </linearGradient>
-      </defs>
-      <path
-        style={{
-          fill: "none",
-          stroke: "#707070",
-          strokeMiterlimit: 10,
-          strokeWidth: "0.5px",
-        }}
-        d="M-4778.1,2239.582v6.425h6.425"
-        transform="translate(4787.594 -2239.582)"
-      />
-      <path
-        fill={"#707070"}
-        d="M-4784.238,2247.532v-.581c0-.027.009-.054.012-.081.039-.313.055-.632.121-.939a6.744,6.744,0,0,1,3.064-4.441,6.514,6.514,0,0,1,3.293-1.032,6.923,6.923,0,0,1,2.667.423,6.793,6.793,0,0,1,4.119,4.333,6.053,6.053,0,0,1,.279,1.337c.006.083.014.164.021.247v.86c-.011.131-.018.261-.032.392a6.494,6.494,0,0,1-.626,2.147,6.807,6.807,0,0,1-4.044,3.528,6.052,6.052,0,0,1-1.663.3,6.576,6.576,0,0,1-2.565-.325,6.73,6.73,0,0,1-3.947-3.451,6.627,6.627,0,0,1-.658-2.288C-4784.212,2247.816-4784.225,2247.674-4784.238,2247.532Zm13.025-.306c-.024-.309-.021-.661-.082-1a6.206,6.206,0,0,0-1.658-3.293,6.153,6.153,0,0,0-4.1-1.9,5.984,5.984,0,0,0-2.476.355,6.188,6.188,0,0,0-4.134,5.708,6.453,6.453,0,0,0,.228,1.881,6.127,6.127,0,0,0,1.984,3.052,6.046,6.046,0,0,0,3.806,1.445,6.043,6.043,0,0,0,1.235-.065,6.249,6.249,0,0,0,3.783-2.2,6.2,6.2,0,0,0,1.352-3.048C-4771.228,2247.863-4771.233,2247.563-4771.212,2247.226Z"
-        transform="translate(4786.834 -2240.452)"
-      />
-      <ellipse
-        style={{ opacity: 0.1, fill: "url(#a)" }}
-        cx="6.151"
-        cy="6.151"
-        rx="6.151"
-        ry="6.151"
-        transform="translate(0 4.886)"
-      />
-    </SvgIcon>
-  );
-};
-
-export default UsageIcon;
--- a/portal-ui/src/icons/VersionIcon.tsx
+++ b/portal-ui/src/icons/VersionIcon.tsx
@@ -20,12 +20,7 @@ import { SvgIcon, SvgIconProps } from "@material-ui/core";
 const VersionIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props}>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="1em"
-        height="1em"
-        viewBox="0 0 123.523 250.048"
-      >
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 123.523 250.048">
        <path d="M122.868 61.247q-9.479-15.673-19.012-31.309c-3.3-5.408-6.654-10.786-10-16.167l-1.325-1.954c-6.086-9.265-18.136-15.384-29.822-9.5-10.457 5.262-14.978 17.8-9.618 28.2 2.035 3.947 5.414 7.281 8.518 10.58 9.561 10.159 19.427 20.03 28.91 30.258a29.852 29.852 0 01-10.4 48.02l-.636.26V72.047a154.076 154.076 0 00-44.533 34.5c-19.719 22-31.377 49.48-34.95 69.532 10.834-5.516 21.518-10.959 32.206-16.4 10.708-5.444 21.342-10.792 32.457-16.439v91.767l14.825 15.04V135.519s.338-.161 1.449-.756c4.371-2.328 8.957-4.368 12.991-7.195a43.9 43.9 0 006.439-66.377C89.354 49.673 78.29 38.206 67.292 26.676c-3.2-3.358-3.131-7.607-.009-10.574 3.045-2.9 7.4-2.65 10.625.6 1.533 1.545 11.859 12.453 15.54 16.314q13.952 14.615 27.951 29.176a19.907 19.907 0 001.545 1.324l.58-.341a9.257 9.257 0 00-.656-1.928zm-58.237 64.956a2.675 2.675 0 01-1.356 1.808c-5.895 3.125-11.838 6.167-17.775 9.217-7.041 3.619-14.092 7.219-21.642 11.091a140.009 140.009 0 0140.548-50.246l.263-.218c.011 9.192.044 19.154-.038 28.348z" />
      </svg>
    </SvgIcon>
--- a/portal-ui/src/icons/index.ts
+++ b/portal-ui/src/icons/index.ts
@@ -31,7 +31,6 @@ export { default as HealIcon } from "./HealIcon";
 export { default as OperatorLogo } from "./OperatorLogo";
 export { default as DeleteIcon } from "./DeleteIcon";
 export { default as ReportedUsageIcon } from "./ReportedUsageIcon";
-export { default as UsageIcon } from "./UsageIcon";
 export { default as PermissionIcon } from "./PermissionIcon";
 export { default as AccountIcon } from "./AccountIcon";
 export { default as DiagnosticIcon } from "./DiagnosticIcon";
@@ -96,3 +95,6 @@ export { default as FilePptIcon } from "./FilePptIcon";
 export { default as FileDbIcon } from "./FileDbIcon";
 export { default as FileTxtIcon } from "./FileTxtIcon";
 export { default as FileVideoIcon } from "./FileVideoIcon";
+
+export { default as ArrowRightIcon } from "./ArrowRightIcon";
+export { default as CalendarIcon } from "./CalendarIcon";
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/BucketListItem.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/BucketListItem.tsx
@@ -13,70 +13,117 @@
 //
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
-import React, { Fragment } from "react";
+import React from "react";
 import { Link } from "react-router-dom";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
-import { BucketsIcon } from "../../../../icons";
-import DeleteIcon from "@material-ui/icons/Delete";
+import {
+  ArrowRightIcon,
+  BucketsIcon,
+  CalendarIcon,
+  LockIcon,
+  ReportedUsageIcon,
+  SettingsIcon,
+  TotalObjectsIcon,
+} from "../../../../icons";
 import { Bucket } from "../types";
-import { niceBytes } from "../../../../common/utils";
-import { IconButton, Tooltip } from "@material-ui/core";
+import {
+  Box,
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  Grid,
+  Typography,
+} from "@material-ui/core";
+import { niceBytes, prettyNumber } from "../../../../common/utils";
 import CheckboxWrapper from "../../Common/FormComponents/CheckboxWrapper/CheckboxWrapper";

 const styles = (theme: Theme) =>
  createStyles({
-    linkContainer: {
-      textDecoration: "none",
-      position: "relative",
-      color: "initial",
-      textAlign: "center",
-      border: "#EAEDEE 1px solid",
-      borderRadius: 3,
-      padding: 15,
-      backgroundColor: "#fff",
-      width: 200,
-      margin: 10,
-      zIndex: 200,
-      "&:hover": {
-        backgroundColor: "#EAEAEA",
-        "& .innerElement": {
-          visibility: "visible",
+    root: {
+      marginBottom: 30,
+      border: 0,
+      borderRadius: 10,
+      color: theme.palette.primary.main,
+      boxShadow: "0px 0px 15px #00000029",
+      "& .MuiSvgIcon-root": {
+        height: 13,
+      },
+      "& .MuiCardHeader-content": {
+        wordWrap: "break-word",
+        overflowWrap: "break-word",
+        wordBreak: "break-all",
+        // height: 90,
+        font: "normal normal bold 24px/27px Lato",
+        color: theme.palette.primary.main,
+
+        "& .MuiTypography-root": {
+          fontSize: 19,
+          fontWeight: "bold",
+          "& .MuiSvgIcon-root": {
+            position: "relative",
+            top: 4,
+            marginRight: 4,
+            height: "24px !important",
+          },
        },
      },
-      "& .innerElement": {
-        visibility: "hidden",
+      "& .MuiCardHeader-root": {
+        background:
+          "transparent linear-gradient(0deg, #EEF1F44E 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box",
      },
    },
-    bucketName: {
-      fontSize: 14,
-      fontWeight: "bold",
-      whiteSpace: "nowrap",
-      textOverflow: "ellipsis",
-      overflow: "hidden",
-      width: "100%",
-      display: "block",
-    },
-    bucketsIcon: {
-      width: 40,
-      height: 40,
-      color: "#393939",
-    },
-    bucketSize: {
-      color: "#777",
-      fontSize: 10,
-    },
-    deleteButton: {
-      position: "absolute",
-      zIndex: 300,
-      top: 0,
-      right: 0,
-    },
    checkBoxElement: {
-      zIndex: 500,
-      position: "absolute",
-      display: "block",
-      bottom: 0,
-      left: 0,
+      width: 32,
+      height: 32,
+      float: "left",
+      overflow: "hidden",
+      "& div": {
+        position: "absolute",
+      },
+    },
+    buttonTray: {
+      textAlign: "right",
+    },
+    viewButton: {
+      width: 111,
+      color: "white",
+      backgroundColor: "#C83B51",
+      fontSize: 12,
+      fontWeight: "normal",
+      boxShadow: "unset",
+      borderRadius: 4,
+    },
+    manageButton: {
+      borderRadius: 4,
+      width: 111,
+      color: theme.palette.grey["700"],
+      textTransform: "unset",
+      fontSize: 12,
+      fontWeight: "normal",
+      "& .MuiButton-endIcon": {
+        "& .MuiSvgIcon-root": {
+          fontSize: 18,
+        },
+      },
+    },
+    divider: {
+      backgroundColor: theme.palette.grey["200"],
+      marginTop: 10,
+      marginBottom: 4,
+    },
+    metricLabel: {
+      fontSize: 16,
+      fontWeight: "bold",
+    },
+    metricText: {
+      fontSize: 50,
+      fontWeight: "bold",
+      marginBottom: 10,
+    },
+    unit: {
+      fontSize: 12,
+      fontWeight: "normal",
    },
  });

@@ -86,6 +133,7 @@ interface IBucketListItem {
  onDelete: (bucketName: string) => void;
  onSelect: (e: React.ChangeEvent<HTMLInputElement>) => void;
  selected: boolean;
+  bulkSelect: boolean;
 }

 const BucketListItem = ({
@@ -94,61 +142,124 @@ const BucketListItem = ({
  onDelete,
  onSelect,
  selected,
+  bulkSelect,
 }: IBucketListItem) => {
-  const onDeleteClick = (e: any) => {
-    e.preventDefault();
-    e.stopPropagation();
-    onDelete(bucket.name);
-  };
+  const usage = niceBytes(`${bucket.size}` || "0");
+  const usageScalar = usage.split(" ")[0];
+  const usageUnit = usage.split(" ")[1];

+  const accessToStr = (bucket: Bucket): string => {
+    if (bucket.rw_access?.read && !bucket.rw_access?.write) {
+      return "R";
+    } else if (!bucket.rw_access?.read && bucket.rw_access?.write) {
+      return "W";
+    } else if (bucket.rw_access?.read && bucket.rw_access?.write) {
+      return "R/W";
+    }
+    return "";
+  };
  const onCheckboxClick = (e: React.ChangeEvent<HTMLInputElement>) => {
-    e.stopPropagation();
-    e.preventDefault();
    onSelect(e);
  };

  return (
-    <Fragment>
-      <Link
-        to={`/buckets/${bucket.name}/browse`}
-        className={classes.linkContainer}
-      >
-        <Tooltip title={`Delete ${bucket.name} bucket`}>
-          <IconButton
-            color="secondary"
-            aria-label="Delete Bucket"
-            component="span"
-            onClick={onDeleteClick}
-            className={`innerElement ${classes.deleteButton}`}
-          >
-            <DeleteIcon />
-          </IconButton>
-        </Tooltip>
-        <BucketsIcon width={40} height={40} className={classes.bucketsIcon} />
-        <br />
-        <Tooltip title={bucket.name}>
-          <span className={classes.bucketName}>{bucket.name}</span>
-        </Tooltip>
-        <span className={classes.bucketSize}>
-          <strong>Used Space:</strong> {niceBytes(bucket.size || "0")}
-        </span>
-        <span
-          className={classes.checkBoxElement}
-          onClick={(e) => {
-            e.stopPropagation();
-          }}
-        >
-          <CheckboxWrapper
-            checked={selected}
-            id={`select-${bucket.name}`}
-            label={""}
-            name={`select-${bucket.name}`}
-            onChange={onCheckboxClick}
-            value={bucket.name}
-          />
-        </span>
-      </Link>
-    </Fragment>
+    <Card className={classes.root}>
+      <CardHeader
+        disableTypography={true}
+        title={
+          <Typography variant={"body1"}>
+            {bulkSelect && (
+              <div
+                className={classes.checkBoxElement}
+                onClick={(e) => {
+                  e.stopPropagation();
+                }}
+              >
+                <CheckboxWrapper
+                  checked={selected}
+                  id={`select-${bucket.name}`}
+                  label={""}
+                  name={`select-${bucket.name}`}
+                  onChange={onCheckboxClick}
+                  value={bucket.name}
+                />
+              </div>
+            )}
+
+            <BucketsIcon />
+            {bucket.name}
+          </Typography>
+        }
+      />
+      <CardContent>
+        <Grid container>
+          <Grid item xs={12} sm={8} md={10}>
+            <Grid container>
+              <Grid item xs={12} md={6}>
+                <Typography variant="body2">
+                  <CalendarIcon /> Created: <b>{bucket.creation_date}</b>
+                </Typography>
+                <Typography variant="body2">
+                  <LockIcon /> Access: <b> {accessToStr(bucket)}</b>
+                </Typography>
+              </Grid>
+              <Grid item xs={6} md={3}>
+                <Typography variant="body1" className={classes.metricLabel}>
+                  <ReportedUsageIcon /> USAGE
+                </Typography>
+                <div className={classes.metricText}>
+                  {usageScalar}
+                  <span className={classes.unit}>{usageUnit}</span>
+                </div>
+              </Grid>
+              <Grid item xs={6} md={3}>
+                <Typography variant="body1" className={classes.metricLabel}>
+                  <TotalObjectsIcon /> OBJECTS
+                </Typography>
+                <div className={classes.metricText}>
+                  {bucket.objects ? prettyNumber(bucket.objects) : 0}
+                </div>
+              </Grid>
+            </Grid>
+          </Grid>
+          <Grid item xs={12} sm={4} md={2} className={classes.buttonTray}>
+            <Grid container>
+              <Grid item xs={6} sm={12} md={12}>
+                <Link
+                  to={`/buckets/${bucket.name}/browse`}
+                  style={{ textDecoration: "none" }}
+                >
+                  <Button
+                    variant="contained"
+                    endIcon={<ArrowRightIcon />}
+                    className={classes.viewButton}
+                  >
+                    Browse
+                  </Button>
+                </Link>
+                <Box display={{ xs: "none", sm: "block" }}>
+                  <div style={{ marginBottom: 10 }} />
+                </Box>
+              </Grid>
+              <Grid item xs={6} sm={12} md={12}>
+                <Link
+                  to={`/buckets/${bucket.name}/admin`}
+                  style={{ textDecoration: "none" }}
+                >
+                  <Button
+                    variant={"outlined"}
+                    endIcon={<SettingsIcon />}
+                    className={classes.manageButton}
+                  >
+                    Manage
+                  </Button>
+                </Link>
+              </Grid>
+            </Grid>
+          </Grid>
+        </Grid>
+      </CardContent>
+    </Card>
  );
 };

--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx
@@ -14,24 +14,20 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.

-import React, { useEffect, useState, Fragment } from "react";
+import React, { Fragment, useEffect, useState } from "react";
 import { connect } from "react-redux";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
-import { Button } from "@material-ui/core";
+import { Box, Button } from "@material-ui/core";
 import Grid from "@material-ui/core/Grid";
 import TextField from "@material-ui/core/TextField";
 import InputAdornment from "@material-ui/core/InputAdornment";
 import FileCopyIcon from "@material-ui/icons/FileCopy";
 import { Bucket, BucketList, HasPermissionResponse } from "../types";
-import { AddIcon } from "../../../../icons";
+import { AddIcon, WatchIcon } from "../../../../icons";
 import { AppState } from "../../../../store";
 import { addBucketOpen, addBucketReset } from "../actions";
 import { setErrorSnackMessage } from "../../../../actions";
-import {
-  actionsTray,
-  containerForHeader,
-  searchField,
-} from "../../Common/FormComponents/common/styleLibrary";
+import { containerForHeader } from "../../Common/FormComponents/common/styleLibrary";
 import { ErrorResponseHandler } from "../../../../common/types";
 import api from "../../../../common/api";
 import AddBucket from "./AddBucket";
@@ -68,14 +64,55 @@ const styles = (theme: Theme) =>
        },
      },
    },
-    bucketsIconsContainer: {
-      display: "flex",
-      flexWrap: "wrap",
-      flexDirection: "row",
-      justifyContent: "flex-start",
+    buttonTray: {
+      textAlign: "right",
+      "& .MuiButton-root": {
+        fontSize: 12,
+        borderColor: theme.palette.grey["300"],
+        color: theme.palette.grey["300"],
+        textTransform: "capitalize",
+        marginRight: 6,
+      },
+      "& .MuiButton-contained": {
+        color: "white",
+      },
+    },
+    bulkSelect: {
+      "&:hover": {
+        backgroundColor: theme.palette.primary.main,
+      },
+      "&.MuiButton-contained": {
+        backgroundColor: theme.palette.primary.main,
+      },
+    },
+    theaderSearchLabel: {
+      color: theme.palette.grey["400"],
+    },
+    theaderSearch: {
+      borderColor: theme.palette.grey["200"],
+      "& .MuiInputBase-input": {
+        paddingTop: 10,
+        paddingBottom: 10,
+      },
+      "& .MuiInputBase-root": {
+        "& .MuiInputAdornment-root": {
+          "& .MuiSvgIcon-root": {
+            color: theme.palette.grey["400"],
+            height: 14,
+          },
+        },
+      },
+      addBucket: {
+        marginRight: 8,
+      },
+      actionHeaderItems: {
+        "@media (min-width: 320px)": {
+          marginTop: 8,
+        },
+      },
+      marginRight: 10,
+      marginLeft: 10,
    },
-    ...actionsTray,
-    ...searchField,
    ...containerForHeader(theme.spacing(4)),
  });

@@ -107,6 +144,8 @@ const ListBuckets = ({
  const [replicationModalOpen, setReplicationModalOpen] =
    useState<boolean>(false);

+  const [bulkSelect, setBulkSelect] = useState<boolean>(false);
+
  // check the permissions for creating bucket
  useEffect(() => {
    if (loadingPerms) {
@@ -223,27 +262,6 @@ const ListBuckets = ({
    }
  };

-  /*
-  [
-                { label: "Name", elementKey: "name" },
-                {
-                  label: "Creation Date",
-                  elementKey: "creation_date",
-                  renderFunction: displayParsedDate,
-                },
-                {
-                  label: "Size",
-                  elementKey: "size",
-                  renderFunction: niceBytes,
-                  width: 60,
-                  contentTextAlign: "right",
-                },
-              ]
-
-
-  
-  */
-
  return (
    <Fragment>
      {addBucketModalOpen && (
@@ -268,55 +286,112 @@ const ListBuckets = ({
          closeModalAndRefresh={closeBulkReplicationModal}
        />
      )}
-      <PageHeader label={"Buckets"} />
+      <PageHeader
+        label={"Buckets"}
+        actions={
+          <Fragment>
+            <Grid
+              container
+              direction="row"
+              justifyContent="flex-end"
+              alignItems="center"
+              className={classes.actionHeaderItems}
+            >
+              <Box display={{ xs: "none", sm: "none", md: "block" }}>
+                <Grid item>
+                  <div className={classes.theaderSearchLabel}>
+                    Search Buckets:
+                  </div>
+                </Grid>
+              </Box>
+              <Box display={{ xs: "block", sm: "block", md: "none" }}>
+                <TextField
+                  className={classes.theaderSearch}
+                  variant={"outlined"}
+                  id="search-resource"
+                  placeholder={"Search Buckets"}
+                  onChange={(val) => {
+                    setFilterBuckets(val.target.value);
+                  }}
+                  inputProps={{
+                    disableUnderline: true,
+                    endAdornment: (
+                      <InputAdornment position="end">
+                        <SearchIcon />
+                      </InputAdornment>
+                    ),
+                  }}
+                />
+              </Box>
+              <Box display={{ xs: "none", sm: "none", md: "block" }}>
+                <TextField
+                  className={classes.theaderSearch}
+                  variant={"outlined"}
+                  id="search-resource"
+                  onChange={(val) => {
+                    setFilterBuckets(val.target.value);
+                  }}
+                  inputProps={{
+                    disableUnderline: true,
+                    endAdornment: (
+                      <InputAdornment position="end">
+                        <SearchIcon />
+                      </InputAdornment>
+                    ),
+                  }}
+                />
+              </Box>
+              {canCreateBucket && (
+                <Grid item>
+                  <Button
+                    variant="contained"
+                    color="primary"
+                    endIcon={<AddIcon />}
+                    onClick={() => {
+                      addBucketOpen(true);
+                    }}
+                    className={classes.addBucket}
+                  >
+                    Create Bucket
+                  </Button>
+                </Grid>
+              )}
+            </Grid>
+          </Fragment>
+        }
+      />
      <Grid container>
        <Grid item xs={12} className={classes.container}>
-          <Grid item xs={12} className={classes.actionsTray}>
-            <TextField
-              placeholder="Filter Buckets"
-              className={classes.searchField}
-              id="search-resource"
-              label=""
-              onChange={(val) => {
-                setFilterBuckets(val.target.value);
-              }}
-              InputProps={{
-                disableUnderline: true,
-                startAdornment: (
-                  <InputAdornment position="start">
-                    <SearchIcon />
-                  </InputAdornment>
-                ),
-              }}
-            />
+          <Grid item xs={12} className={classes.buttonTray}>
            <Button
-              variant="contained"
-              color="primary"
-              startIcon={<FileCopyIcon />}
+              variant={bulkSelect ? "contained" : "outlined"}
+              onClick={() => {
+                setBulkSelect(!bulkSelect);
+              }}
+              endIcon={<WatchIcon />}
+              size={"small"}
+              className={classes.bulkSelect}
+            >
+              Bulk Select
+            </Button>
+
+            <Button
+              variant="outlined"
+              endIcon={<FileCopyIcon />}
              onClick={() => {
                setReplicationModalOpen(true);
              }}
              disabled={selectedBuckets.length === 0}
+              size={"small"}
            >
              Set Replication
            </Button>
-            {canCreateBucket && (
-              <Button
-                variant="contained"
-                color="primary"
-                startIcon={<AddIcon />}
-                onClick={() => {
-                  addBucketOpen(true);
-                }}
-              >
-                Create Bucket
-              </Button>
-            )}
          </Grid>
+
          <Grid item xs={12}>
            <br />
          </Grid>
-          <Grid item xs={12} className={classes.bucketsIconsContainer}>
+          <Grid item xs={12}>
            {filteredRecords.map((bucket, index) => {
              return (
                <BucketListItem
@@ -325,6 +400,7 @@ const ListBuckets = ({
                  onDelete={confirmDeleteBucket}
                  onSelect={selectListBuckets}
                  selected={selectedBuckets.includes(bucket.name)}
+                  bulkSelect={bulkSelect}
                />
              );
            })}
--- a/portal-ui/src/screens/Console/Buckets/types.tsx
+++ b/portal-ui/src/screens/Console/Buckets/types.tsx
@@ -14,10 +14,17 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.

+export interface RwAccess {
+  write: boolean;
+  read: boolean;
+}
+
 export interface Bucket {
  name: string;
  creation_date: Date;
-  size?: string;
+  size?: number;
+  objects?: number;
+  rw_access?: RwAccess;
 }

 export interface BucketEncryptionInfo {
--- a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
+++ b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
@@ -127,10 +127,10 @@ export const radioIcons = {

 export const containerForHeader = (bottomSpacing: any) => ({
  container: {
-    padding: "82px 8px 0",
+    padding: "8px 16px 0",
    "& h6": {
      color: "#777777",
-      fontSize: 14,
+      fontSize: 30,
    },
    "& p": {
      "& span:not(*[class*='smallUnit'])": {
@@ -735,7 +735,7 @@ const commonStateIcon = {
  marginRight: 10,
  lineHeight: 1,
  display: "inline-flex",
-  marginTop: 6 ,
+  marginTop: 6,
 };

 export const commonDashboardInfocard = {
@@ -804,7 +804,6 @@ export const commonDashboardInfocard = {
    },
  },
  cardContainer: {
-    border: "#EEF1F4 2px solid",
    borderRadius: 10,
    boxShadow: "0 0 15px #00000029",
    maxWidth: 1185,
@@ -826,7 +825,6 @@ export const commonDashboardInfocard = {
    alignItems: "center" as const,
    lineHeight: 1,
    fontWeight: "bold" as const,
-    textTransform: "capitalize" as const,
    "& .MuiSvgIcon-root": {
      width: 10,
      height: 10,
--- a/portal-ui/src/screens/Console/Common/PageHeader/PageHeader.tsx
+++ b/portal-ui/src/screens/Console/Common/PageHeader/PageHeader.tsx
@@ -6,13 +6,14 @@ import { AppState } from "../../../../store";
 import { connect } from "react-redux";
 import OperatorLogo from "../../../../icons/OperatorLogo";
 import ConsoleLogo from "../../../../icons/ConsoleLogo";
+import { Box } from "@material-ui/core";

 const styles = (theme: Theme) =>
  createStyles({
    headerContainer: {
-      position: "absolute",
+      // position: "absolute",
      width: "100%",
-      height: 77,
+      minHeight: 77,
      display: "flex",
      backgroundColor: "#fff",
      borderBottom: "2px solid",
@@ -32,8 +33,7 @@ const styles = (theme: Theme) =>
      marginTop: 8,
    },
    rightMenu: {
-      marginTop: 16,
-      marginRight: 8,
+      textAlign: "right",
    },
    logo: {
      marginLeft: 34,
@@ -61,9 +61,15 @@ const PageHeader = ({
    <Grid
      container
      className={classes.headerContainer}
-      justify={"space-between"}
+      direction="row"
+      alignItems="center"
    >
-      <Grid item className={classes.label}>
+      <Box display={{ xs: "block", sm: "block", md: "none" }}>
+        <Grid item xs={12} style={{ height: 10 }}>
+          &nbsp;
+        </Grid>
+      </Box>
+      <Grid item xs={12} sm={12} md={6} className={classes.label}>
        {!sidebarOpen && (
          <div className={classes.logo}>
            {operatorMode ? <OperatorLogo /> : <ConsoleLogo />}
@@ -74,7 +80,7 @@ const PageHeader = ({
        </Typography>
      </Grid>
      {actions && (
-        <Grid item className={classes.rightMenu}>
+        <Grid item xs={12} sm={12} md={6} className={classes.rightMenu}>
          {actions}
        </Grid>
      )}
--- a/portal-ui/src/screens/Console/Common/TabSelector/types.ts
+++ b/portal-ui/src/screens/Console/Common/TabSelector/types.ts
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.

 export interface ITabOption {
-    label: string;
-    value?: string;
-    disabled?: boolean;
+  label: string;
+  value?: string;
+  disabled?: boolean;
 }
--- a/portal-ui/src/screens/Console/Console.tsx
+++ b/portal-ui/src/screens/Console/Console.tsx
@@ -446,25 +446,23 @@ const Console = ({
                }}
              />
            </div>
-            <Container className={classes.container}>
-              <Router history={history}>
-                <Switch>
-                  {allowedRoutes.map((route: any) => (
-                    <Route
-                      key={route.path}
-                      exact
-                      path={route.path}
-                      children={(routerProps) => (
-                        <route.component {...routerProps} {...route.props} />
-                      )}
-                    />
-                  ))}
-                  {allowedRoutes.length > 0 ? (
-                    <Redirect to={allowedRoutes[0].path} />
-                  ) : null}
-                </Switch>
-              </Router>
-            </Container>
+            <Router history={history}>
+              <Switch>
+                {allowedRoutes.map((route: any) => (
+                  <Route
+                    key={route.path}
+                    exact
+                    path={route.path}
+                    children={(routerProps) => (
+                      <route.component {...routerProps} {...route.props} />
+                    )}
+                  />
+                ))}
+                {allowedRoutes.length > 0 ? (
+                  <Redirect to={allowedRoutes[0].path} />
+                ) : null}
+              </Switch>
+            </Router>
          </main>
        </div>
      ) : null}
--- a/portal-ui/src/screens/Console/Dashboard/BasicDashboard/BasicDashboard.tsx
+++ b/portal-ui/src/screens/Console/Dashboard/BasicDashboard/BasicDashboard.tsx
@@ -100,7 +100,9 @@ const BasicDashboard = ({ classes, usage }: IDashboardProps) => {

  const serverArray = makeServerArray(usage);

-  const usageToRepresent = prettyUsage(usage ? usage.usage.toString() : "0");
+  const usageToRepresent = prettyUsage(
+    usage && usage.usage ? usage.usage.toString() : "0"
+  );

  let allDrivesArray: IDriveInfo[] = [];

--- a/portal-ui/yarn.lock
+++ b/portal-ui/yarn.lock
@@ -1488,14 +1488,14 @@
    "@types/yargs" "^15.0.0"
    chalk "^4.0.0"

-"@material-ui/core@^4.11.2":
-  version "4.11.4"
-  resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.11.4.tgz#4fb9fe5dec5dcf780b687e3a40cff78b2b9640a4"
-  integrity sha512-oqb+lJ2Dl9HXI9orc6/aN8ZIAMkeThufA5iZELf2LQeBn2NtjVilF5D2w7e9RpntAzDb4jK5DsVhkfOvFY/8fg==
+"@material-ui/core@^4.12.3":
+  version "4.12.3"
+  resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.12.3.tgz#80d665caf0f1f034e52355c5450c0e38b099d3ca"
+  integrity sha512-sdpgI/PL56QVsEJldwEe4FFaFTLUqN+rd7sSZiRCdx2E/C7z5yK0y/khAWVBH24tXwto7I1hCzNWfJGZIYJKnw==
  dependencies:
    "@babel/runtime" "^7.4.4"
    "@material-ui/styles" "^4.11.4"
-    "@material-ui/system" "^4.11.3"
+    "@material-ui/system" "^4.12.1"
    "@material-ui/types" "5.1.0"
    "@material-ui/utils" "^4.11.2"
    "@types/react-transition-group" "^4.2.0"
@@ -1513,10 +1513,10 @@
  dependencies:
    "@babel/runtime" "^7.4.4"

-"@material-ui/lab@^4.0.0-alpha.58":
-  version "4.0.0-alpha.58"
-  resolved "https://registry.yarnpkg.com/@material-ui/lab/-/lab-4.0.0-alpha.58.tgz#c7ebb66f49863c5acbb20817163737caa299fafc"
-  integrity sha512-GKHlJqLxUeHH3L3dGQ48ZavYrqGOTXkFkiEiuYMAnAvXAZP4rhMIqeHOPXSUQan4Bd8QnafDcpovOSLnadDmKw==
+"@material-ui/lab@^4.0.0-alpha.60":
+  version "4.0.0-alpha.60"
+  resolved "https://registry.yarnpkg.com/@material-ui/lab/-/lab-4.0.0-alpha.60.tgz#5ad203aed5a8569b0f1753945a21a05efa2234d2"
+  integrity sha512-fadlYsPJF+0fx2lRuyqAuJj7hAS1tLDdIEEdov5jlrpb5pp4b+mRDUqQTUxi4inRZHS1bEXpU8QWUhO6xX88aA==
  dependencies:
    "@babel/runtime" "^7.4.4"
    "@material-ui/utils" "^4.11.2"
@@ -1524,7 +1524,7 @@
    prop-types "^15.7.2"
    react-is "^16.8.0 || ^17.0.0"

-"@material-ui/pickers@^3.2.10":
+"@material-ui/pickers@^3.3.10":
  version "3.3.10"
  resolved "https://registry.yarnpkg.com/@material-ui/pickers/-/pickers-3.3.10.tgz#f1b0f963348cc191645ef0bdeff7a67c6aa25485"
  integrity sha512-hS4pxwn1ZGXVkmgD4tpFpaumUaAg2ZzbTrxltfC5yPw4BJV+mGkfnQOB4VpWEYZw2jv65Z0wLwDE/piQiPPZ3w==
@@ -1558,10 +1558,10 @@
    jss-plugin-vendor-prefixer "^10.5.1"
    prop-types "^15.7.2"

-"@material-ui/system@^4.11.3":
-  version "4.11.3"
-  resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-4.11.3.tgz#466bc14c9986798fd325665927c963eb47cc4143"
-  integrity sha512-SY7otguNGol41Mu2Sg6KbBP1ZRFIbFLHGK81y4KYbsV2yIcaEPOmsCK6zwWlp+2yTV3J/VwT6oSBARtGIVdXPw==
+"@material-ui/system@^4.12.1":
+  version "4.12.1"
+  resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-4.12.1.tgz#2dd96c243f8c0a331b2bb6d46efd7771a399707c"
+  integrity sha512-lUdzs4q9kEXZGhbN7BptyiS1rLNHe6kG9o8Y307HCvF4sQxbCgpL2qi+gUk+yI8a2DNk48gISEQxoxpgph0xIw==
  dependencies:
    "@babel/runtime" "^7.4.4"
    "@material-ui/utils" "^4.11.2"
--- a/restapi/embedded_spec.go
+++ b/restapi/embedded_spec.go
@@ -3623,10 +3623,64 @@ func init() {
        "creation_date": {
          "type": "string"
        },
+        "details": {
+          "type": "object",
+          "properties": {
+            "locking": {
+              "type": "boolean"
+            },
+            "quota": {
+              "type": "object",
+              "properties": {
+                "quota": {
+                  "type": "integer",
+                  "format": "int64"
+                },
+                "type": {
+                  "type": "string",
+                  "enum": [
+                    "fifo",
+                    "hard"
+                  ]
+                }
+              }
+            },
+            "replication": {
+              "type": "boolean"
+            },
+            "tags": {
+              "type": "object",
+              "additionalProperties": {
+                "type": "string"
+              }
+            },
+            "versioning": {
+              "type": "boolean"
+            },
+            "versioningSuspended": {
+              "type": "boolean"
+            }
+          }
+        },
        "name": {
          "type": "string",
          "minLength": 3
        },
+        "objects": {
+          "type": "integer",
+          "format": "int64"
+        },
+        "rw_access": {
+          "type": "object",
+          "properties": {
+            "read": {
+              "type": "boolean"
+            },
+            "write": {
+              "type": "boolean"
+            }
+          }
+        },
        "size": {
          "type": "integer",
          "format": "int64"
@@ -8974,6 +9028,72 @@ func init() {
    }
  },
  "definitions": {
+    "BucketDetails": {
+      "type": "object",
+      "properties": {
+        "locking": {
+          "type": "boolean"
+        },
+        "quota": {
+          "type": "object",
+          "properties": {
+            "quota": {
+              "type": "integer",
+              "format": "int64"
+            },
+            "type": {
+              "type": "string",
+              "enum": [
+                "fifo",
+                "hard"
+              ]
+            }
+          }
+        },
+        "replication": {
+          "type": "boolean"
+        },
+        "tags": {
+          "type": "object",
+          "additionalProperties": {
+            "type": "string"
+          }
+        },
+        "versioning": {
+          "type": "boolean"
+        },
+        "versioningSuspended": {
+          "type": "boolean"
+        }
+      }
+    },
+    "BucketDetailsQuota": {
+      "type": "object",
+      "properties": {
+        "quota": {
+          "type": "integer",
+          "format": "int64"
+        },
+        "type": {
+          "type": "string",
+          "enum": [
+            "fifo",
+            "hard"
+          ]
+        }
+      }
+    },
+    "BucketRwAccess": {
+      "type": "object",
+      "properties": {
+        "read": {
+          "type": "boolean"
+        },
+        "write": {
+          "type": "boolean"
+        }
+      }
+    },
    "WidgetDetailsOptions": {
      "type": "object",
      "properties": {
@@ -9237,10 +9357,64 @@ func init() {
        "creation_date": {
          "type": "string"
        },
+        "details": {
+          "type": "object",
+          "properties": {
+            "locking": {
+              "type": "boolean"
+            },
+            "quota": {
+              "type": "object",
+              "properties": {
+                "quota": {
+                  "type": "integer",
+                  "format": "int64"
+                },
+                "type": {
+                  "type": "string",
+                  "enum": [
+                    "fifo",
+                    "hard"
+                  ]
+                }
+              }
+            },
+            "replication": {
+              "type": "boolean"
+            },
+            "tags": {
+              "type": "object",
+              "additionalProperties": {
+                "type": "string"
+              }
+            },
+            "versioning": {
+              "type": "boolean"
+            },
+            "versioningSuspended": {
+              "type": "boolean"
+            }
+          }
+        },
        "name": {
          "type": "string",
          "minLength": 3
        },
+        "objects": {
+          "type": "integer",
+          "format": "int64"
+        },
+        "rw_access": {
+          "type": "object",
+          "properties": {
+            "read": {
+              "type": "boolean"
+            },
+            "write": {
+              "type": "boolean"
+            }
+          }
+        },
        "size": {
          "type": "integer",
          "format": "int64"
--- a/restapi/user_buckets.go
+++ b/restapi/user_buckets.go
@@ -307,11 +307,38 @@ func getAccountInfo(ctx context.Context, client MinioAdmin) ([]*models.Bucket, e

 	var bucketInfos []*models.Bucket
 	for _, bucket := range info.Buckets {
+
 		bucketElem := &models.Bucket{
-			Name:         swag.String(bucket.Name),
-			Size:         int64(bucket.Size),
 			CreationDate: bucket.Created.Format(time.RFC3339),
+			Details: &models.BucketDetails{
+				Quota: nil,
+			},
+			RwAccess: &models.BucketRwAccess{
+				Read:  bucket.Access.Read,
+				Write: bucket.Access.Write,
+			},
+			Name:    swag.String(bucket.Name),
+			Objects: int64(bucket.Objects),
+			Size:    int64(bucket.Size),
 		}
+
+		if bucket.Details != nil {
+			if bucket.Details.Tagging != nil {
+				bucketElem.Details.Tags = bucket.Details.Tagging.ToMap()
+			}
+
+			bucketElem.Details.Locking = bucket.Details.Locking
+			bucketElem.Details.Replication = bucket.Details.Replication
+			bucketElem.Details.Versioning = bucket.Details.Versioning
+			bucketElem.Details.VersioningSuspended = bucket.Details.VersioningSuspended
+			if bucket.Details.Quota != nil {
+				bucketElem.Details.Quota = &models.BucketDetailsQuota{
+					Quota: int64(bucket.Details.Quota.Quota),
+					Type:  string(bucket.Details.Quota.Type),
+				}
+			}
+		}
+
 		bucketInfos = append(bucketInfos, bucketElem)
 	}
 	return bucketInfos, nil
--- a/swagger-console.yml
+++ b/swagger-console.yml
@@ -2343,6 +2343,42 @@ definitions:
        format: int64
      access:
        $ref: "#/definitions/bucketAccess"
+      rw_access:
+        type: object
+        properties:
+          write:
+            type: boolean
+          read:
+            type: boolean
+      objects:
+        type: integer
+        format: int64
+      details:
+        type: object
+        properties:
+          versioning:
+            type: boolean
+          versioningSuspended:
+            type: boolean
+          locking:
+            type: boolean
+          replication:
+            type: boolean
+          tags:
+            type: object
+            additionalProperties:
+              type: string
+          quota:
+            type: object
+            properties:
+              quota:
+                type: integer
+                format: int64
+              type:
+                type: string
+                enum:
+                  - fifo
+                  - hard
      creation_date:
        type: string