diff --git a/.github/workflows/argilla-frontend.yml b/.github/workflows/argilla-frontend.yml index 2693757ef4..c4eb5b5ad1 100644 --- a/.github/workflows/argilla-frontend.yml +++ b/.github/workflows/argilla-frontend.yml @@ -48,7 +48,6 @@ jobs: - name: Build package 📦 env: # BASE_URL is used in the server to support parameterizable base root path - # See scripts/build_frontend.sh BASE_URL: "@@baseUrl@@" DIST_FOLDER: ./dist run: | diff --git a/.github/workflows/argilla-server.yml b/.github/workflows/argilla-server.yml index 6952ff8906..0624c880a4 100644 --- a/.github/workflows/argilla-server.yml +++ b/.github/workflows/argilla-server.yml @@ -82,6 +82,8 @@ jobs: run: pdm install - name: Run tests 📈 + env: + HF_TOKEN_ARGILLA_INTERNAL_TESTING: ${{ secrets.HF_TOKEN_ARGILLA_INTERNAL_TESTING }} run: | ARGILLA_DATABASE_URL=postgresql://postgres:postgres@localhost:5432/argilla ARGILLA_ELASTICSEARCH=http://localhost:9200 diff --git a/.github/workflows/argilla.yml b/.github/workflows/argilla.yml index dae16b7fe2..e7b7b66605 100644 --- a/.github/workflows/argilla.yml +++ b/.github/workflows/argilla.yml @@ -33,7 +33,7 @@ jobs: USERNAME: argilla PASSWORD: 12345678 API_KEY: argilla.apikey - runs-on: ubuntu-latest + runs-on: ubuntu-22.04 defaults: run: working-directory: argilla diff --git a/.gitignore b/.gitignore index faf682a258..5e093d53d6 100644 --- a/.gitignore +++ b/.gitignore @@ -133,9 +133,6 @@ sw.* # Ruff cache .ruff_cache/ -yarn.lock -package-lock.json - # App generated files src/**/server/static/ diff --git a/argilla-frontend/CHANGELOG.md b/argilla-frontend/CHANGELOG.md index 391a4800d3..88a0456446 100644 --- a/argilla-frontend/CHANGELOG.md +++ b/argilla-frontend/CHANGELOG.md @@ -16,6 +16,18 @@ These are the section headers that we use: ## [Unreleased]() +## [2.6.0](https://github.com/argilla-io/argilla/compare/v2.5.0...v2.6.0) + +### Added + +- Add share progress feature ([#5727](https://github.com/argilla-io/argilla/pull/5727)) +- Added feature to export datasets from Argilla to Hugging Face hub from the UI ([#5730](https://github.com/argilla-io/argilla/pull/5730)) + +### Fixed + +- Improved performance and accessibility ([#5724](https://github.com/argilla-io/argilla/pull/5724)) +- Fixed dataset update date information in the dataset list ([#5741](https://github.com/argilla-io/argilla/pull/#5741)) + ## [2.5.0](https://github.com/argilla-io/argilla/compare/v2.4.1...v2.5.0) ### Added diff --git a/argilla-frontend/assets/css/fonts.css b/argilla-frontend/assets/css/fonts.css new file mode 100644 index 0000000000..b5e7926584 --- /dev/null +++ b/argilla-frontend/assets/css/fonts.css @@ -0,0 +1,7 @@ +@font-face { + font-family: "raptor_v2_premiumbold"; + src: url("/fonts/raptorv2premium-bold-webfont.woff2") format("woff2"), + url("/fonts/raptorv2premium-bold-webfont.woff") format("woff"); + font-weight: normal; + font-style: normal; +} diff --git a/argilla-frontend/assets/scss/abstract/variables/_themes.scss b/argilla-frontend/assets/css/themes.css similarity index 100% rename from argilla-frontend/assets/scss/abstract/variables/_themes.scss rename to argilla-frontend/assets/css/themes.css diff --git a/argilla-frontend/assets/icons/export.js b/argilla-frontend/assets/icons/export.js new file mode 100644 index 0000000000..236f247c5f --- /dev/null +++ b/argilla-frontend/assets/icons/export.js @@ -0,0 +1,27 @@ +/* + * coding=utf-8 + * Copyright 2021-present, the Recognai S.L. team. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/* eslint-disable */ +var icon = require('vue-svgicon') +icon.register({ + 'export': { + width: 26, + height: 31, + viewBox: '0 0 26 31', + data: '' + } +}) \ No newline at end of file diff --git a/argilla-frontend/assets/icons/index.js b/argilla-frontend/assets/icons/index.js index 53de88bc02..36e92d0233 100644 --- a/argilla-frontend/assets/icons/index.js +++ b/argilla-frontend/assets/icons/index.js @@ -19,6 +19,7 @@ require('./discard') require('./draggable') require('./expand-arrows') require('./exploration') +require('./export') require('./external-link') require('./external') require('./filter') diff --git a/argilla-frontend/assets/scss/abstract.scss b/argilla-frontend/assets/scss/abstract.scss index 58b4f002f0..c49350b567 100644 --- a/argilla-frontend/assets/scss/abstract.scss +++ b/argilla-frontend/assets/scss/abstract.scss @@ -16,10 +16,8 @@ */ // abstract -@import "abstract/fonts/fonts"; @import "abstract/functions/functions"; @import "abstract/variables/variables"; -@import "abstract/variables/themes"; @import "abstract/mixins/mixins"; @import "abstract/mixins/media-queries"; @import "abstract/mixins/grid-mixins"; diff --git a/argilla-frontend/assets/scss/abstract/fonts/fonts.scss b/argilla-frontend/assets/scss/abstract/fonts/fonts.scss deleted file mode 100644 index eb5f01b159..0000000000 --- a/argilla-frontend/assets/scss/abstract/fonts/fonts.scss +++ /dev/null @@ -1,7 +0,0 @@ -@font-face { - font-family: "raptor_v2_premiumbold"; - src: url("@/assets/fonts/raptorv2premium-bold-webfont.woff2") format("woff2"), - url("@/assets/fonts/raptorv2premium-bold-webfont.woff") format("woff"); - font-weight: normal; - font-style: normal; -} diff --git a/argilla-frontend/assets/scss/abstract/mixins/_media-queries.scss b/argilla-frontend/assets/scss/abstract/mixins/_media-queries.scss index 131e764b90..8d50cb951b 100644 --- a/argilla-frontend/assets/scss/abstract/mixins/_media-queries.scss +++ b/argilla-frontend/assets/scss/abstract/mixins/_media-queries.scss @@ -16,33 +16,20 @@ */ @charset "UTF-8"; -// _ _ _ _ _ -// (_) | | | | | (_) -// _ _ __ ___| |_ _ __| | ___ _ __ ___ ___ __| |_ __ _ -// | | '_ \ / __| | | | |/ _` |/ _ \ | '_ ` _ \ / _ \/ _` | |/ _` | -// | | | | | (__| | |_| | (_| | __/ | | | | | | __/ (_| | | (_| | -// |_|_| |_|\___|_|\__,_|\__,_|\___| |_| |_| |_|\___|\__,_|_|\__,_| -// -// Simple, elegant and maintainable media queries in Sass -// v1.4.9 -// -// http://include-media.com -// -// Authors: Eduardo Boucas (@eduardoboucas) -// Hugo Giraudel (@hugogiraudel) -// -// This project is licensed under the terms of the MIT license -//// -/// include-media library public configuration -/// @author Eduardo Boucas -/// @access public -//// -/// -/// Creates a list of global breakpoints -/// -/// @example scss - Creates a single breakpoint with the label `phone` -/// $breakpoints: ('phone': 320px); -/// +// Simple, elegant and maintainable media queries in Sass +// v1.4.9 +// http://include-media.com +// Authors: Eduardo Boucas (@eduardoboucas) +// Hugo Giraudel (@hugogiraudel) +// This project is licensed under the terms of the MIT license + +// include-media library public configuration +// @author Eduardo Boucas +// @access public + +// Creates a list of global breakpoints +// @example scss - Creates a single breakpoint with the label `phone` +// $breakpoints: ('phone': 320px); $breakpoints: ( "phone": 320px, "tablet": 768px, @@ -50,17 +37,14 @@ $breakpoints: ( "desktopLarge": 1440px, "xxl": 1900px, ) !default; -/// -/// Creates a list of static expressions or media types -/// -/// @example scss - Creates a single media type (screen) -/// $media-expressions: ('screen': 'screen'); -/// -/// @example scss - Creates a static expression with logical disjunction (OR operator) -/// $media-expressions: ( -/// 'retina2x': '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)' -/// ); -/// + +// Creates a list of static expressions or media types +// @example scss - Creates a single media type (screen) +// $media-expressions: ('screen': 'screen'); +// @example scss - Creates a static expression with logical disjunction (OR operator) +// $media-expressions: ( +// 'retina2x': '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)' +// ); $media-expressions: ( "screen": "screen", "print": "print", @@ -72,125 +56,102 @@ $media-expressions: ( "retina3x": "(-webkit-min-device-pixel-ratio: 3), (min-resolution: 350dpi), (min-resolution: 3dppx)", ) !default; -/// -/// Defines a number to be added or subtracted from each unit when declaring breakpoints with exclusive intervals -/// -/// @example scss - Interval for pixels is defined as `1` by default -/// @include media('>128px') {} -/// -/// /* Generates: */ -/// @media (min-width: 129px) {} -/// -/// @example scss - Interval for ems is defined as `0.01` by default -/// @include media('>20em') {} -/// -/// /* Generates: */ -/// @media (min-width: 20.01em) {} -/// -/// @example scss - Interval for rems is defined as `0.1` by default, to be used with `font-size: 62.5%;` -/// @include media('>2.0rem') {} -/// -/// /* Generates: */ -/// @media (min-width: 2.1rem) {} -/// + +// Defines a number to be added or subtracted from each unit when declaring breakpoints with exclusive intervals +// @example scss - Interval for pixels is defined as `1` by default +// @include media('>128px') {} +// /* Generates: */ +// @media (min-width: 129px) {} +// @example scss - Interval for ems is defined as `0.01` by default +// @include media('>20em') {} +// /* Generates: */ +// @media (min-width: 20.01em) {} +// @example scss - Interval for rems is defined as `0.1` by default, to be used with `font-size: 62.5%;` +// @include media('>2.0rem') {} +// /* Generates: */ +// @media (min-width: 2.1rem) {} $unit-intervals: ( "px": 1, "em": 0.01, "rem": 0.1, "": 0, ) !default; -/// -/// Defines whether support for media queries is available, useful for creating separate stylesheets -/// for browsers that don't support media queries. -/// -/// @example scss - Disables support for media queries -/// $im-media-support: false; -/// @include media('>=tablet') { -/// .foo { -/// color: tomato; -/// } -/// } -/// -/// /* Generates: */ -/// .foo { -/// color: tomato; -/// } -/// + +// Defines whether support for media queries is available, useful for creating separate stylesheets +// for browsers that don't support media queries. +// @example scss - Disables support for media queries +// $im-media-support: false; +// @include media('>=tablet') { +// .foo { +// color: tomato; +// } +// } +// /* Generates: */ +// .foo { +// color: tomato; +// } $im-media-support: true !default; -/// -/// Selects which breakpoint to emulate when support for media queries is disabled. Media queries that start at or -/// intercept the breakpoint will be displayed, any others will be ignored. -/// -/// @example scss - This media query will show because it intercepts the static breakpoint -/// $im-media-support: false; -/// $im-no-media-breakpoint: 'desktop'; -/// @include media('>=tablet') { -/// .foo { -/// color: tomato; -/// } -/// } -/// -/// /* Generates: */ -/// .foo { -/// color: tomato; -/// } -/// -/// @example scss - This media query will NOT show because it does not intercept the desktop breakpoint -/// $im-media-support: false; -/// $im-no-media-breakpoint: 'tablet'; -/// @include media('>=desktop') { -/// .foo { -/// color: tomato; -/// } -/// } -/// -/// /* No output */ -/// + +// Selects which breakpoint to emulate when support for media queries is disabled. Media queries that start at or +// intercept the breakpoint will be displayed, any others will be ignored. +// @example scss - This media query will show because it intercepts the static breakpoint +// $im-media-support: false; +// $im-no-media-breakpoint: 'desktop'; +// @include media('>=tablet') { +// .foo { +// color: tomato; +// } +// } +// /* Generates: */ +// .foo { +// color: tomato; +// } +// @example scss - This media query will NOT show because it does not intercept the desktop breakpoint +// $im-media-support: false; +// $im-no-media-breakpoint: 'tablet'; +// @include media('>=desktop') { +// .foo { +// color: tomato; +// } +// } +// /* No output */ $im-no-media-breakpoint: "desktop" !default; -/// -/// Selects which media expressions are allowed in an expression for it to be used when media queries -/// are not supported. -/// -/// @example scss - This media query will show because it intercepts the static breakpoint and contains only accepted media expressions -/// $im-media-support: false; -/// $im-no-media-breakpoint: 'desktop'; -/// $im-no-media-expressions: ('screen'); -/// @include media('>=tablet', 'screen') { -/// .foo { -/// color: tomato; -/// } -/// } -/// -/// /* Generates: */ -/// .foo { -/// color: tomato; -/// } -/// -/// @example scss - This media query will NOT show because it intercepts the static breakpoint but contains a media expression that is not accepted -/// $im-media-support: false; -/// $im-no-media-breakpoint: 'desktop'; -/// $im-no-media-expressions: ('screen'); -/// @include media('>=tablet', 'retina2x') { -/// .foo { -/// color: tomato; -/// } -/// } -/// -/// /* No output */ -/// + +// Selects which media expressions are allowed in an expression for it to be used when media queries +// are not supported. +// @example scss - This media query will show because it intercepts the static breakpoint and contains only accepted media expressions +// $im-media-support: false; +// $im-no-media-breakpoint: 'desktop'; +// $im-no-media-expressions: ('screen'); +// @include media('>=tablet', 'screen') { +// .foo { +// color: tomato; +// } +// } +// /* Generates: */ +// .foo { +// color: tomato; +// } +// @example scss - This media query will NOT show because it intercepts the static breakpoint but contains a media expression that is not accepted +// $im-media-support: false; +// $im-no-media-breakpoint: 'desktop'; +// $im-no-media-expressions: ('screen'); +// @include media('>=tablet', 'retina2x') { +// .foo { +// color: tomato; +// } +// } +// /* No output */ $im-no-media-expressions: ("screen", "portrait", "landscape") !default; -//// -/// Cross-engine logging engine -/// @author Hugo Giraudel -/// @access private -//// -/// -/// Log a message either with `@error` if supported -/// else with `@warn`, using `feature-exists('at-error')` -/// to detect support. -/// -/// @param {String} $message - Message to log -/// + +// Cross-engine logging engine +// @author Hugo Giraudel +// @access private + +// Log a message either with `@error` if supported +// else with `@warn`, using `feature-exists('at-error')` +// to detect support. +// @param {String} $message - Message to log @function im-log($message) { @if feature-exists("at-error") { @error $message; @@ -201,33 +162,24 @@ $im-no-media-expressions: ("screen", "portrait", "landscape") !default; @return $message; } -/// -/// Wrapper mixin for the log function so it can be used with a more friendly -/// API than `@if im-log('..') {}` or `$_: im-log('..')`. Basically, use the function -/// within functions because it is not possible to include a mixin in a function -/// and use the mixin everywhere else because it's much more elegant. -/// -/// @param {String} $message - Message to log -/// +// Wrapper mixin for the log function so it can be used with a more friendly +// API than `@if im-log('..') {}` or `$_: im-log('..')`. Basically, use the function +// within functions because it is not possible to include a mixin in a function +// and use the mixin everywhere else because it's much more elegant. +// @param {String} $message - Message to log @mixin log($message) { @if im-log($message) { } } -/// -/// Function with no `@return` called next to `@warn` in Sass 3.3 -/// to trigger a compiling error and stop the process. -/// +// Function with no `@return` called next to `@warn` in Sass 3.3 +// to trigger a compiling error and stop the process. @function noop() { } -/// -/// Determines whether a list of conditions is intercepted by the static breakpoint. -/// -/// @param {Arglist} $conditions - Media query conditions -/// -/// @return {Boolean} - Returns true if the conditions are intercepted by the static breakpoint -/// +// Determines whether a list of conditions is intercepted by the static breakpoint. +// @param {Arglist} $conditions - Media query conditions +// @return {Boolean} - Returns true if the conditions are intercepted by the static breakpoint @function im-intercepts-static-breakpoint($conditions...) { $no-media-breakpoint-value: map-get($breakpoints, $im-no-media-breakpoint); @if not $no-media-breakpoint-value { @@ -251,24 +203,20 @@ $im-no-media-expressions: ("screen", "portrait", "landscape") !default; @return true; } -//// -/// Parsing engine -/// @author Hugo Giraudel -/// @access private -//// -/// -/// Get operator of an expression -/// -/// @param {String} $expression - Expression to extract operator from -/// -/// @return {String} - Any of `>=`, `>`, `<=`, `<`, `≥`, `≤` -/// +// Parsing engine +// @author Hugo Giraudel +// @access private + +// Get operator of an expression +// @param {String} $expression - Expression to extract operator from +// @return {String} - Any of `>=`, `>`, `<=`, `<`, `≥`, `≤` @function get-expression-operator($expression) { @each $operator in (">=", ">", "<=", "<", "≥", "≤") { @if str-index($expression, $operator) { @return $operator; } - } // It is not possible to include a mixin inside a function, so we have to + } + // It is not possible to include a mixin inside a function, so we have to // rely on the `im-log(..)` function rather than the `log(..)` mixin. Because // functions cannot be called anywhere in Sass, we need to hack the call in // a dummy variable, such as `$_`. If anybody ever raise a scoping issue with @@ -276,14 +224,10 @@ $im-no-media-expressions: ("screen", "portrait", "landscape") !default; $_: im-log("No operator found in `#{$expression}`."); } -/// -/// Get dimension of an expression, based on a found operator -/// -/// @param {String} $expression - Expression to extract dimension from -/// @param {String} $operator - Operator from `$expression` -/// -/// @return {String} - `width` or `height` (or potentially anything else) -/// +// Get dimension of an expression, based on a found operator +// @param {String} $expression - Expression to extract dimension from +// @param {String} $operator - Operator from `$expression` +// @return {String} - `width` or `height` (or potentially anything else) @function get-expression-dimension($expression, $operator) { $operator-index: str-index($expression, $operator); $parsed-dimension: str-slice($expression, 0, $operator-index - 1); @@ -294,25 +238,17 @@ $im-no-media-expressions: ("screen", "portrait", "landscape") !default; @return $dimension; } -/// -/// Get dimension prefix based on an operator -/// -/// @param {String} $operator - Operator -/// -/// @return {String} - `min` or `max` -/// +// Get dimension prefix based on an operator +// @param {String} $operator - Operator +// @return {String} - `min` or `max` @function get-expression-prefix($operator) { @return if(index(("<", "<=", "≤"), $operator), "max", "min"); } -/// -/// Get value of an expression, based on a found operator -/// -/// @param {String} $expression - Expression to extract value from -/// @param {String} $operator - Operator from `$expression` -/// -/// @return {Number} - A numeric value -/// +// Get value of an expression, based on a found operator +// @param {String} $expression - Expression to extract value from +// @param {String} $operator - Operator from `$expression` +// @return {Number} - A numeric value @function get-expression-value($expression, $operator) { $operator-index: str-index($expression, $operator); $value: str-slice($expression, $operator-index + str-length($operator)); @@ -338,13 +274,9 @@ $im-no-media-expressions: ("screen", "portrait", "landscape") !default; @return $value; } -/// -/// Parse an expression to return a valid media-query expression -/// -/// @param {String} $expression - Expression to parse -/// -/// @return {String} - Valid media query -/// +// Parse an expression to return a valid media-query expression +// @param {String} $expression - Expression to parse +// @return {String} - Valid media query @function parse-expression($expression) { // If it is part of $media-expressions, it has no operator // then there is no need to go any further, just return the value @@ -358,17 +290,12 @@ $im-no-media-expressions: ("screen", "portrait", "landscape") !default; @return "(#{$prefix}-#{$dimension}: #{$value})"; } -/// -/// Slice `$list` between `$start` and `$end` indexes -/// -/// @access private -/// -/// @param {List} $list - List to slice -/// @param {Number} $start [1] - Start index -/// @param {Number} $end [length($list)] - End index -/// -/// @return {List} Sliced list -/// +// Slice `$list` between `$start` and `$end` indexes +// @access private +// @param {List} $list - List to slice +// @param {Number} $start [1] - Start index +// @param {Number} $end [length($list)] - End index +// @return {List} Sliced list @function slice($list, $start: 1, $end: length($list)) { @if length($list) < 1 or $start>$end { @return (); @@ -380,18 +307,13 @@ $im-no-media-expressions: ("screen", "portrait", "landscape") !default; @return $result; } -//// -/// String to number converter -/// @author Hugo Giraudel -/// @access private -//// -/// -/// Casts a string into a number -/// -/// @param {String | Number} $value - Value to be parsed -/// -/// @return {Number} -/// +// String to number converter +// @author Hugo Giraudel +// @access private + +// Casts a string into a number +// @param {String | Number} $value - Value to be parsed +// @return {Number} @function to-number($value) { @if type-of($value) == "number" { @return $value; @@ -413,7 +335,8 @@ $im-no-media-expressions: ("screen", "portrait", "landscape") !default; "7": 7, "8": 8, "9": 9, - ); // Remove +/- sign if present at first character + ); + // Remove +/- sign if present at first character @if ($first-character== "+" or $first-character== "-") { $value: str-slice($value, 2); } @@ -434,6 +357,83 @@ $im-no-media-expressions: ("screen", "portrait", "landscape") !default; @return if($minus, -$result, $result); } +// Add `$unit` to `$value` +// @param {Number} $value - Value to add unit to +// @param {String} $unit - String representation of the unit +// @return {Number} - `$value` expressed in `$unit` +@function to-length($value, $unit) { + $units: ( + "px": 1px, + "cm": 1cm, + "mm": 1mm, + "%": 1%, + "ch": 1ch, + "pc": 1pc, + "in": 1in, + "em": 1em, + "rem": 1rem, + "pt": 1pt, + "ex": 1ex, + "vw": 1vw, + "vh": 1vh, + "vmin": 1vmin, + "vmax": 1vmax, + ); + @if not index(map-keys($units), $unit) { + $_: im-log("Invalid unit `#{$unit}`."); + } + @return $value * map-get($units, $unit); +} + +// This mixin aims at redefining the configuration just for the scope of +// the call. It is helpful when having a component needing an extended +// configuration such as custom breakpoints (referred to as tweakpoints) +// for instance. +// @author Hugo Giraudel +// @param {Map} $tweakpoints [()] - Map of tweakpoints to be merged with `$breakpoints` +// @param {Map} $tweak-media-expressions [()] - Map of tweaked media expressions to be merged with `$media-expression` +// @example scss - Extend the global breakpoints with a tweakpoint +// @include media-context(('custom': 678px)) { +// .foo { +// @include media('>phone', '<=custom') { +// // ... +// } +// } +// } +// @example scss - Extend the global media expressions with a custom one +// @include media-context($tweak-media-expressions: ('all': 'all')) { +// .foo { +// @include media('all', '>phone') { +// // ... +// } +// } +// } +// @example scss - Extend both configuration maps +// @include media-context(('custom': 678px), ('all': 'all')) { +// .foo { +// @include media('all', '>phone', '<=custom') { +// // ... +// } +// } +// } +@mixin media-context($tweakpoints: (), $tweak-media-expressions: ()) { + // Save global configuration + $global-breakpoints: $breakpoints; + $global-media-expressions: $media-expressions; + // Update global configuration + $breakpoints: map-merge($breakpoints, $tweakpoints) !global; + $media-expressions: map-merge( + $media-expressions, + $tweak-media-expressions + ) !global; + @content; + // Restore global configuration + $breakpoints: $global-breakpoints !global; + $media-expressions: $global-media-expressions !global; +} + +// include-media public exposed API +// @author Eduardo Boucas /// /// Add `$unit` to `$value` /// diff --git a/argilla-frontend/assets/scss/abstract/placeholders/_tooltip.scss b/argilla-frontend/assets/scss/abstract/placeholders/_tooltip.scss index 9ad05632c1..aeff1d1889 100644 --- a/argilla-frontend/assets/scss/abstract/placeholders/_tooltip.scss +++ b/argilla-frontend/assets/scss/abstract/placeholders/_tooltip.scss @@ -115,7 +115,7 @@ $tooltip-border-radius: $border-radius-s; height: auto; opacity: 1; transition: opacity 0.3s ease 0.2s; - z-index: 2; + z-index: 3; } &:before { opacity: 1; @@ -177,6 +177,10 @@ $tooltip-border-radius: $border-radius-s; top: auto; transform: none; } + } @else if $position == "none" { + &:after { + display: none; + } } &:before { content: none !important; diff --git a/argilla-frontend/assets/scss/base/base.scss b/argilla-frontend/assets/scss/base/base.scss index 515b5e505f..383ad3cee4 100644 --- a/argilla-frontend/assets/scss/base/base.scss +++ b/argilla-frontend/assets/scss/base/base.scss @@ -16,6 +16,7 @@ */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap"); html { box-sizing: border-box; -webkit-text-size-adjust: 100%; @@ -53,7 +54,7 @@ body { a, button { - color: var(--fg-secondary); + color: var(--fg-primary); } audio, diff --git a/argilla-frontend/assets/styles.scss b/argilla-frontend/assets/styles.scss new file mode 100644 index 0000000000..2925cad234 --- /dev/null +++ b/argilla-frontend/assets/styles.scss @@ -0,0 +1,3 @@ +@import "./css/fonts.css"; +@import "./css/themes.css"; +@import "./scss/base/base.scss"; diff --git a/argilla-frontend/components/base/base-banner/BaseBanner.vue b/argilla-frontend/components/base/base-banner/BaseBanner.vue index 0169d79832..6a091905c8 100644 --- a/argilla-frontend/components/base/base-banner/BaseBanner.vue +++ b/argilla-frontend/components/base/base-banner/BaseBanner.vue @@ -77,7 +77,7 @@ export default { }; - + diff --git a/argilla-frontend/components/base/base-button/BaseButton.vue b/argilla-frontend/components/base/base-button/BaseButton.vue index 41704556d5..ee7a13a30e 100644 --- a/argilla-frontend/components/base/base-button/BaseButton.vue +++ b/argilla-frontend/components/base/base-button/BaseButton.vue @@ -25,6 +25,8 @@ :target="target" :rel="newRel" @click="onClick" + @mouseover="$emit('mouseover')" + @mouseleave="$emit('mouseleave')" > @@ -36,6 +38,8 @@ :loading="loading" :disabled="disabled" @click="onClick" + @mouseover="$emit('mouseover')" + @mouseleave="$emit('mouseleave')" > @@ -48,6 +52,8 @@ :type="type" :disabled="disabled" @click="onClick" + @mouseover="$emit('mouseover')" + @mouseleave="$emit('mouseleave')" >